我们直接通过 webpack.config.js 实现一个最基础的打包
文件目录
|--dist
|--src
| |--index.js
| |
| |--sum.js
|--webpack.config.js
如图所示,我们基本的文件目录。
如果不配置入口。src/index.js 将默认成为入口。
如果不设置配置文件。webpack.config.js 将默认成为配置文件。我们这边就不修改配置文件路径了。
webpack.config.js
通过配置文件设置一下基础的信息如下,配置文件是 common.js 的语法。
let path = require('path');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'source-map',
module:{
rules: [
{
test: /\.css$/,
use: []
}
]
},
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns:['**/*']
}),
new HtmlWebpackPlugin({
template:'./src/index.html',
/** 文件最小化 **/
minify: {
/** 移除双引号 **/
removeAttributeQuotes: true,
/** 变成一行 **/
collapseWhitespace: true
},
/** 添加哈希值,防止缓存**/
hash: true,
/** 将js 插入到body中的最后一行, 不加默认会添加到 head 中,所以是必须的**/
inject: 'body',
/** 生成的html的文件名**/
filename: 'login.html'
});
]
}
- mode 环境,development | production。开发环境不会压缩代码,生产环境会压缩代码。
- entry 打包入口,string | object。
- 当 entry 为 string 时,表示打包入口的路径。
- 当 entry 为 object 时,可以配置多个入口。
- output 打包输出配置,属性较多,这边只讲述几个:
- filename: 输出文件名,可以根据不同参数动态生成,这边简略就先写死了,后续详细介绍。
- path: 输出路径,必须为绝对路径
- module 配置 loader
- plugins 配置插件,常用插件如下:
- clean-webpack-plugin 可以设置每次打包前都清理打包文件夹,可以通过正则表达式匹配要清理的文件
注意 :
- clean-webpack-plugin 清理文件夹只有在 output 设置了 path之后生效,默认不会清理,
- 在webpack 5 中内置了 webpack.CleanPlugin 可以代替 clean-webpack-plugin。
- html-webpack-plugin 打包完之后自动生成html,并且引用 js,也可以通过模版生成html,以及一些常见配置属性,如上代码
devtool
devtool 设置为 source-map 可以增强调试过程,source-map后面会介绍,这边对比下效果,如下:
不加 devtool 的打包结果,都是 eval,eval主要是为了更好的热更新。
加了 devtool 的打包结果,就和正常代码差不多了。
loader
加载器(翻译官),主要用于转化模块
loader 编译规则:从右往左或者从下往上,也可以通过 enforce 强制改变编译顺序。从右到左
这边loader 执行顺序是 css-loader => style-loader。先导出字符串,然后插入 style 标签。module.exports = {
//...
module:{
rules: [
{
//test 匹配符合后缀的文件
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
//...
}
从下往上
除了上面那种写法,还有分开写的rule,不过比较不常用
执行顺序同样是是 css-loader => style-loadermodule.exports = {
//...
module:{
rules: [
{
//test 匹配符合后缀的文件
test: /\.css$/,
use: ['style-loader']
},
{
test: /\.css$/,
use: ['css-loader']
}
]
}
//...
}
通过enforce设置执行顺序
enforce有两个值:
- pre 前置执行
- post 后置执行
执行顺序同样是是 css-loader => style-loader
module.exports = {
//...
module:{
rules: [
{
test: /\.css$/,
use: ['css-loader'],
enforce: 'pre'
},
{
//test 匹配符合后缀的文件
test: /\.css$/,
use: ['style-loader']
},
]
}
//...
}
module.exports = {
module:{
rules:{
test:/\.css$/,
use:['css-loader']
},
rules:{
test:/\.css$/,
use:['style-loader'],
enforce:'post'
}
}
}
use 值的类型
use 是一个数组,其值可以是 string,也可以是一个配置对象。
当是对象时配置如下:
module.exports = {
module:{
rules: [
{
test:/\.css$/,
use: ['style-loader', {
loader: 'css-loader',
options: {
modules: true
}
}]
}
]
}
}
plugins
插件