webpack简述
webpack简单来说就是一个模块打包器,也是目前最流行的前端构建工具之一,他将整个项目根据依赖关系通过各种loader与plugin的处理后进行打包;可以实现对代码的各种处理,比如less、sass、stylus的解析,ecmascript版本的转换、代码的压缩分割等等
webpack之loader
loader可以说是webpack最核心的部分,前面所说的各种功能大部分就是又他完成的;loader简单来说就是一个导出为函数的JavaScript模块,webpack会配置文件申明的倒序调用loader,传入资源文件,经loader处理后传给下一loader或者webpack处理
常用loader
1.sass-loader、less-loader、stylus-loader、style-loader、css-loader
2.babel-loader
3.file-loader、url-loader
4.vue-loader
5.string-loader
webpack之plugin
plugin是webpack的重要组成部分,他能以各种钩子钩入每个编译(compilation)中触发的所有关键事件,插件都具备完全访问compiler对象的能力
常用plugin
1.HtmlWebpackPlugin,将入口js文件添加至html,并移至输出目录,可实现html压缩,去除引号等一些优化功能
2.CleanWebpackPlugin,每次打包之前清空指定目录
3.HotModuleReplacementPlugin,热更新代码,开发时使用
4.DefinePlugin,定义每个模块都能访问的变量
5.DllPlugin、DllReferencePlugin,预编译模块,可优化webpack打包速度
6.VueLoaderPlugin;将loader配置应用于vue单文件组件
以下是详细配置
webpack版本:4.x.x
{
mode: 'development', // production:生产,会压缩代码;development:开发,不会压缩代码,便于debug
devtool: 'inline-source-map',// 添加source map;便于debug,但会严重影响性能,千万不要在生产环境使用
// webpack打包的入口
entry: {
app: './src/index.js', // 路径相对于package.json
// app: ['./vue.js', './src/index.js']
},
// 文件输出
output: {
filename: '[name].js',
path: path.resolve(__dirname, '../dist') // 输出的目录,默认为dist
},
optimization: {
runtimeChunk: true,// 将webpack打包后的主文件单独分离,默认是将主文件放在入口文件当中,当需要在入口文件之前引入打包的公共代码时需要用到,此项建议对webpack有一定了解后再理解,关于打包后的代码分析我会单独写一篇
// 抽离公共代码
splitChunks: {
cacheGroups: {
vendor: { // 抽离第三方插件
test: /node_modules/, // 指定是 node_modules 下的第三方包
chunks: 'initial', // initial 对于异步导入的文件不处理;async 异步chunk,只对异步导入的文件处理;all 全部chunk
name: 'common/vendor', // 打包后的文件名,任意命名,会逆优化首屏加载的速度,慎用,建议每个公共代码块都单独抽离或者手动配置
priority: 10 // 设置优先级,防止和自定义的公共代码提取时被覆盖,不进行打包
},
utils: { // 抽离自定义公共代码
test: /\.js$/,
chunks: 'initial',
name: true, // 每个页面的包只包含需要的文件,不会影响首屏加载的速度,good job
minSize: 0 // 只要超出 0 字节就生成一个新包,默认30000B
}
}
}
},
module: {
rules: [
// 打包css文件需要用到的loader
// 注意:loader的执行顺序是后面的先执行
// style-loader必须在css-loader的前面
{
test: /\.css$/,
use: [
// 将css文件以style标签形式插入
{
loader: 'style-loader',
options: {
singleton: true // 设置为true,多个css文件会在同一个style标签内
}
},
'css-loader'
],
include: path.resolve(__dirname, '../src') // 只处理对应目录下的文件,构建性能提升
},
{
test: /\.js$/,
use: [
'babel-loader', // 配置babel转换代码
],
exclude: path.resolve(__dirname, '../node_modules')
}
]
},
plugins: [
// 在每次打包前清理dist目录
// 注意配置删除dist目录下的所有文件,而不是dist目录,因为当dist目录其他程序打开时将无法删除
new CleanWebpackPlugin(['dist/*'], {
root: path.resolve(__dirname, '../')
}),
// 用于处理入口html,如自动注入entry对应js,并拷贝至压缩目录等等
new HtmlWebpackPlugin({
template: './src/index.html',
// 压缩html
minify: {
removeComments: true, // 删除注释
collapseWhitespace: true, // 删除空格
removeAttributeQuotes: true // 删除属性的引号
}
})
],
// 配置后webpack会跳过对应模块的打包,当使用cdn时需要用到,此项能提升构建性能与前端性能
externals: {
vue: 'vue'
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。