Home > Article > Web Front-end > vue study notes (1)--webpack study
Before learning vue, first learn the front-end packaging tool-webpack. This article shares the learning about webpack. Friends who are interested can take a look.
Recently, vue has been used in the project, and I have been hearing about its name for a long time. , but I know very little about it, so I took this opportunity to learn about vue.
Before learning vue, I first learned the front-end packaging tool-webpack, which is currently a very excellent and widely used packaging tool. Follow the official webpack tutorial to learn, but the official tutorial is currently based on webpack3, and the actual use is webpack4. There are some big differences at present, and I have also made some summaries. I will make a simple record here to facilitate future review and study.
Webpack is a static compilation tool (pre-compilation) [static module bundle], which is different from seaJs and requireJS (online compilation), similar to the difference between javac and jit
Several concepts in webpack
Entry
output
loader
Separation of two environments
new webpack.DefinePlugin({
//许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容
// 在webpack4中mode会自动设置该信息，废弃该配置
"process.env.NODE_ENV": JSON.stringify("development")
})
Using this method in webpack4 is no longer valid, and you need to use the newly provided mode to specify different environments.
Mode is divided into development and production, and one must be set, otherwise an error message will be reported.// 环境设置，webpack4必须有该值，使用该属性来设置不同的环境，目前有development和production两种，也可以使用：--mode development设置 // process.env.NODE_ENV会被该设置覆盖 mode:"development",
Four code separation
The specific settings are as follows:
// 将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
}
}
]
})
},
]
}The specific configuration is as follows:
There are two ways to use SplitChunkPlugin:
1. Optimization .splitChunksoptimization: {
//提取公共模块，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
}
}
}
}
The specific configuration is the same as optimization.splitChunks
Five hot replacement
//查看要修补(patch)的依赖,被optimization.namedModules代替，development模式下默认开启，显示模块的相对路径 new webpack.NamedModulesPlugin(), // 热替换插件 new webpack.HotModuleReplacementPlugin(),
六treeshaking
7 Lazy loading
##
The above is the detailed content of vue study notes (1)--webpack study. For more information, please follow other related articles on the PHP Chinese website!