趁着假期闲暇，练习下 webpack4.0 的一些配置。
webpack4 优化压缩 js 和 css 方式
let UglifyJsPlugin = require(“uglifyjs-webpack-plugin”);
let OptimizeCSSAssetsPlugin = require(“optimize-css-assets-webpack-plugin”);
optimization: {// 优化项
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,// 并发打包
sourceMap: true // set to true if you want JS source maps
}),// 开发环境下不压缩 js，想启用压缩功能，需要把 mode 切换为 production
new OptimizeCSSAssetsPlugin({})
]
},
注意：若想优化生效，必须将 mode 改为 production 模式 详情见 npm 官网
expose-loader 暴露全局 loader，称为内联 loader。到目前为止，有内联 loader，普通 normal loader，前置 loader (pre loader)，后置 loader（post loader）
在项目中引入 jquery 类似模块方式
webpack.config.js 配置
let webpack =require(‘webpack’);
plugins:[// 存放 webpack 插件
new webpack.ProvidePlugin({// 在每个模块中注入 $
‘$’:’jquery’
})
],
webpack 引入基层模块方式
expose-loader 暴露到全局 window 上
providePlugin 给每个模块提供 $
cdn 方式引入不打包，webpack 需要配置 externals
打包文件分类
new MiniCssExtractPlugin({
filename:’css/main.css’
}),
将 css 打包在 css 文件夹中
{
test:/(.png|.jpg)$/,
use:{
loader:’url-loader’,
options:{
limit:50*1024,
outputPath:’images/’,
//publicPath:”
}
}
}
图片打包路径前配置 publicPath 即可。
生成 source-map 便于调试，几种不同选项
(1) 增加源码映射文件，便于调试。标示报错文件行和列，大而全文件
devtool:’source-map’
(2) 不会产生单独文件，但是可以显示行和列
devtool:’eval-source-map’
(3) 不会产生列，但是是一个单独的映射文件，用于调试
devtool:’cheap-module-source-map’
(4) 不会产生文件，集成在打包后的文件中，也不会产生列
devtool:’cheap-module-eval-source-map’
监听文件变动，实时打包
watch:true,
watchOptions:{// 监听选项
poll:1000,// 每秒问我 1000 次，是否打包
aggregateTimeout:500,// 防抖
ignored:/node_modules/// 不需要监控的文件
},
webpack 插件应用
cleanWebpackPlugin(需要安装依赖模块)
new CleanWebpackPlugin(‘./dist’)// 先清空 dist 目录下的文件在打包
copyWebpackPlugin(需要安装依赖模块)
new CopyWebpackPlugin([
{
from:’./doc’,
to:’./dist’
}// 可以写多个，拷贝多个目录文件
])
bannerPlugin(内置插件)
// 添加版权注释信息
new Webpack.BannerPlugin(‘make by mgl 2019-2-1’)
运行打包命令后，可在打包文件中看到注释信息
npm run dev
webpack 中 devServer 几种配置
(1) 单纯配置跨域代理方式
proxy:{
‘/api’:{
target:’http://localhost:3000′,
pathRewrite:{‘/api’:”}
}
}
(2) 前端单纯 mock 数据
before(app){
app.get(‘/user’,(req,res)=>{
res.json({name:’mgl-before’});
})
}
(3) 有服务端，不用代理来处理，在服务端中启动 webpack，用服务端端口
//express
let express = require(‘express’);
let webpack=require(‘webpack’);
// 引入中间件
let middle=require(‘webpack-dev-middleware’);
let config=require(‘./webpack.config.js’);
let compiler=webpack(config);//webpack 处理返回结果
let app=express();
app.use(middle(compiler));
app.get(‘/user’,(req,res)=>{
res.json({name:’mgl’});
})
app.listen(3000)
resolve 属性配置
resolve:{// 解析第三方模块
modules:[path.resolve(‘node_modules’)],
extensions:[‘.js’,’.css’,’.vue’,’.json’]// 指定解析后缀名称，从左向右
// mainFields:[‘style’,’main’]// 指定引入模块的先后顺序
// mainFiles:[],// 指定入口文件的名字，默认是 index.js
// alias:{// 配置别名
// bootstrap:’bootstrap/dist/css/bootstrap.css’
// }
},
陆续更新中，欢迎关注个人博客，同步更新中！