纲要
1.webpack的根本应用(打包js)
2.拆分配置(将配置文件拆分为三个:根本配置,生产配置,开发配置,省去打包前手动批改模式配置(生产或开发));合并配置(将生产,或开发配置与根本配置合并,应用webpack-merge插件实现)
3.学习webpack-dev-serve的应用(配置接口门路,代码改变页面自动更新)
4.Webpack打包css(webpack默认只能打包js)
5.Webpack解决图片
6.多入口(输入多个html文件)
1.webpack最根本应用
1.webpack.config.js
const path =require('path')const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode:'development',//模式,不写默认为开发模式(未压缩,未删空格,正文),'production'(生产模式) entry:{ //打包入口 main:'./src/index.js' }, output:{//打包输入 filename:'[name].js'//打包输入文件名,[name] === main(入口文件) path:path.resolve(_dirname,'dist')//打包输入门路 }, plufins:[//插件 new HtmlWebpackPlugin({ template:'./src/index.html' }) ]}2.package.json
//配置打包命令{ "scripts":{ "build":"webpack" }}3.执行打包npm run build
2.拆分,合并配置
1.src同级目录创立build文件夹
2.新建webpack.base.config.js文件 //根本配置
新建webpack.dev.config.js文件 //开发配置
新建webpack.prod.config.js文件 //生产配置
3.webpack.base.config.js
const path =require('path')const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry:{ main:'./src/index.js' }, output:{ filename:'[name].js' path:path.resolve(_dirname,'dist') }, plufins:[ new HtmlWebpackPlugin({ template:'./src/index.html' }) ]}4.webpack.dev.config.js
const commonConfig =require('./webpack.base.consfig.js');//引入根本配置const {smart:merge} =require('webpack-merge')//引入webpack-merge模块的smart办法(用于合并)const devConfig = {//开发模式配置 mode:;'development'}module.exports =merge(commonConfig,devConfig)//合并根本配置和开发配置5.webpack.prod.config.js
const commonConfig =require('./webpack.base.consfig.js');//引入根本配置const {smart:merge} =require('webpack-merge')//引入webpack-merge的smart办法(用于合并)const prodConfig = {//生产模式配置 mode:;'production'}module.exports =merge(commonConfig,prodConfig)//合并根本配置和生产配置6.package.json
//配置打包命令{ "scripts":{ "build:dev":"webpack --config ./build/webpack.dev.config.js", "build":"webpack --config ./build/webpack.prod.config.js", }}3.webpack-dev-serve的应用
1.实现代码改变页面自动更新
1.1.webpack.dev.config.js
const devConfig = {//开发模式配置 mode:;'development', devServer:{ port:8080,//服务器启动端口8080 contentBase:'./dist',//服务器动态资源文件夹 progress:true,//打包时显示进度条 open:true,//启动服务器后,主动关上浏览器 compress:true//开启gzip压缩 }}1.2.package.json
//配置打包命令{ "scripts":{ "dev":"webpack-dev-server --config ./build/webpack.dev.config.js" }}2.接口地址代理转发(接口相对路径补全)
axios.get('/api/project/userinfo').then(res=>{})1.webpack.dev.config.js
const devConfig = {//开发模式配置 mode:;'development', devServer:{ port:8080,//服务器启动端口8080 contentBase:'./dist',//服务器动态资源文件夹 progress:true,//打包时显示进度条 open:true,//启动服务器后,主动关上浏览器 compress:true//开启gzip压缩 }, proxy:{ //代理 '/api/project':{ //发送到'/api/project'的申请转发到'http://baidu.com' target:'http://baidu.com', changeOrigin:true, pathRewrite:{ //门路重写,假如你申请的门路对立写了/api结尾,但但后盾接口没有,则过滤掉 '^/api':'' } } }}4.Webpack打包css(loader执行程序由下往上)
1.webpack.base.config.js
module.exports = { module:{ rules:[ { test:/\.css&$/, //程序 loader:[ 'style-loader',//将款式插入到页面style标签中 // 2 'css-loader'//解决css文件之间的依赖关系, @import款式引入关系 //1 ] } ], rules:[ ... ] }, }2.增加解决css兼容性loader //'postcss-loader'
应用'postcss-loader页面渲染成果transform:rotate(-45deg)=>-webkit-transform:rotate(-45deg)transform:rotate(-45deg)1.webpack.base.config.js
module.exports = { module:{ rules:[ { test:/\.css&$/, loader:[ 'style-loader',//将款式插入到页面style标签中 'css-loader'//解决css文件之间的依赖关系, @import款式引入关系 'postcss-loader' //需装置autoprefixer插件 ] } ] }, }2.创立postcss.config.js文件
module.exports = { plugins:[ require('autoprefixer') ]}3.package.json
//在"scriptrs"同级增加"browserslist": [ "> 1%", "last 2 versions" ]3.增加预编译loader -略
5.Webpack解决图片
比拟小的图片,就转成base64格局,能够缩小http申请
比拟大的图片,仍然想file-loader一样,独自打包到img文件夹中,发申请获取,避免页面首次渲染太慢
import img from './img/1.png'; //webpack默认是解决不了的1.开发环境下应用file-loader
file-loader会将引入的图片放到dist目录下
//webpack.dev.config.jsmodule:{ rules:[ { test:/\.(png|jpg)$/, loader:'file-loader' } ]}2.生产环境下应用url-loader进行base64转码
//webpack.prod.config.jsmodule:{ rules:[ { test:/\.(png|jpg)$/, use:{ loader:'url-loader', options:{ limit:5*1024, //小于5kb就转码 outputPath:'/img/' //大图打包到dist/img文件夹中 } } } ]}6.多入口
//webpack.base.config.jsentry:{ index:'./src/index.js', other:'./src/other.js'},plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', filename:'index.html', chunks:['index'] }), new HtmlWebpackPlugin({ template:'./src/other.html', filename:'other.html', chunks:['other'] }),]7.抽离css
上述打包后的css代码,没有独自打包成一个css文件,而是打包在了main.js中,并通过插入到了页面style标签中的形式引入,当初我要实现打包成一个css文件,link办法引入
//webpack.prod.config.jsconst MiniCSSExtractPlugin =require('mini-css-extract-plugin');//用来打包生成css文件const TerserPlugin = require('terser-webpack-plugin');const OptimizeCssAssetWebpackPlugin= require('optimize-css-asset-webpack-plugin')plugins:[ new MiniCSSExtractPlugin({ filename:'css/main.[contentHash:8].css' //[contentHash:8]设置缓存 })],优化optimization:{ minimizer:[ //压缩js new TerserPlugin(), //压缩css new OptimizeCssAssetWebpackPlugin() ]}, module:{ rules:[ { test:/\.css&$/, loader:[ MiniCSSExtractPlugin.loader, 'css-loader'//解决css文件之间的依赖关系, @import款式引入关系 'postcss-loader' //需装置autoprefixer插件 ] } ] },