vue学习笔记(1)--webpack学习

new webpack.DefinePlugin({
 //许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容
 // 在webpack4中mode会自动设置该信息，废弃该配置
 "process.env.NODE_ENV": JSON.stringify("development")
})

// 环境设置，webpack4必须有该值，使用该属性来设置不同的环境，目前有development和production两种，也可以使用：--mode development设置
// process.env.NODE_ENV会被该设置覆盖
mode:"development",

// 将CSS分离 https://doc.webpack-china.org/plugins/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//使用extractTextPlugin就不能在单独使用style-loader
config.module:{
 rules:[
 {
 test:/\.css$/,
 use : ExtractTextPlugin.extract({
 fallback : "style-loader",
 //这样使用会出现url()解析路径错误的问题
 //use : "css-loader"
 //使用该方式解决url()路径问题
 use:[
 {
 loader:"css-loader",
 options:{
 //用于解决url()路径解析错误
 url:false,
 minimize:true,
 sourceMap:true
 }
 }
 ]
 })
 }, 
 ]
}

optimization: {
 //提取公共模块，webpack4去除了CommonsChunkPlugin，使用SplitChunksPlugin作为替代
 //主要用于多页面
 //例子代码 https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
 //SplitChunksPlugin配置，其中缓存组概念目前不是很清楚
 splitChunks: {
 // 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
 chunks: "all",
 // 表示在压缩前的最小模块大小，默认为0；
 minSize: 30000,
 //表示被引用次数，默认为1
 minChunks: 1,
 //最大的按需(异步)加载次数，默认为1；
 maxAsyncRequests: 3,
 //最大的初始化加载次数，默认为1；
 maxInitialRequests: 3,
 // 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；设置ture则使用默认值
 name: true,
 //缓存组，目前在项目中设置cacheGroup可以抽取公共模块，不设置则不会抽取
 cacheGroups: {
 //缓存组信息，名称可以自己定义
 commons: {
 //拆分出来块的名字,默认是缓存组名称+"~" + [name].js
 name: "test",
 // 同上
 chunks: "all",
 // 同上
 minChunks: 3,
 // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
 enforce: true,
 //test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；
 test:""
 },
 //设置多个缓存规则
 vendor: {
 test: /node_modules/,
 chunks: "all",
 name: "vendor",
 //表示缓存的优先级
 priority: 10,
 enforce: true
 }
 }
 }
 }

//查看要修补(patch)的依赖,被optimization.namedModules代替，development模式下默认开启，显示模块的相对路径
new webpack.NamedModulesPlugin(),
// 热替换插件
new webpack.HotModuleReplacementPlugin(),