webpack常见配置:
// 入口文件
entry: {
app: './src/js/index.js',
},
// 输出文件
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/' //确保文件资源能够在 http://localhost:3000 下正确访问
},
// 开发者工具 source-map
devtool: 'inline-source-map',
// 创建开发者服务器
devServer: {
contentBase: './dist',
hot: true // 热更新
},
plugins: [
// 删除dist目录
new CleanWebpackPlugin(['dist']),
// 重新穿件html文件
new HtmlWebpackPlugin({
title: 'Output Management'
}),
// 以便更容易查看要修补(patch)的依赖
new webpack.NamedModulesPlugin(),
// 热更新模块
new webpack.HotModuleReplacementPlugin()
],
// 环境
mode: "development",
// loader配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
打包原理
- 识别入口文件
- 通过逐层识别模块依赖。(Commonjs、amd或者es6的import,webpack都会对其进行分析。来获取代码的依赖)
- webpack做的就是分析代码,转换代码,编译代码,输出代码
- 最终形成打包后的代码
loader:就是一个转换器,将A文件进行编译形成B文件,比如将A.scss或A.less转变为B.css,单纯的文件转换过程。Loader让webpack能够处理不同的文件。在webpack中loader有两个目标:
1、识别出应该被对应的loader进行转换的文件。(使用test属性)
2、转换这些文件,从而使其能够被添加到依赖图中(并最终添加到bundle中)。(使用use属性)
对应webpack.config.js中的module属性:
module:{
rules:[{
test:
use:
include/exclude:
query:
},
......
]}
test:用于匹配处理文件的扩展名的表达式,必须
use:loader名称,就是要使用的模块名,必须
include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹),可选
query:为loader提供额外的设置选项,可选
其中,use有三种写法:
(1)直接用use:
use:['style-loader','css-loader']
(2)将use换成loader:
loader:['style-loader','css-loader']
(3)使用use + loader:
use: [{
loader: "style-loader"
}, {
loader: "css-loader",
options:{}
}]
plugin:就是一个扩展器,它丰富了wepack本身,针对webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,例如
- run:开始编译
- make:从entry开始递归分析依赖并对依赖进行build
- build-module:使用loader加载文件并build模块
- normal-module-loader:对loader加载的文件用acorn编译,生成抽象语法树AST
- program:开始对AST进行遍历,当遇到require时触发call require事件
- seal:所有依赖build完成,开始对chunk进行优化(抽取公共模块、加hash等)
- optimize-chunk-assets:压缩代码
- emit:把各个chunk输出到结果文件
通过对节点的监听,从而找到合适的节点对文件做适当的处理。
插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。
1、打包HTML,要将 HTML 文件从 src 目录下打包到 dist 目录下,需要借助 html-webpack-plugin 插件
2、JS压缩,在webpack中JS压缩使用的是 uglifyjs-webpack-plugin插件。