“这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战”
写在前面:我也发现了,面试过程中侥幸很少被问到node和webpack相关的题目(可能是我简历上没写),但也确实反应出一些问题---短板,关于node和webpack的相关知识储备较少,现开始着手亡羊补牢了,先是webpack的学习.
事关我对于webpack的一些记录---其一
三个流程
webpack打包分为三个流程 module(模块) chunk(区块) bundle(包/束),分别对应代码的三种状态:开发的代码文件,打包的中间形态,打包后的成品包.
其中,一个或多个module模块被压缩成chunk区块,一个chunk对于一个bundle包.
一些常用命令的含义
-D devDependencies(指开发环境下使用)
-S save (指保存在package.json)
-g global (指全局)
-i install ( 指安装)
配置文件
webpack有个配置文件webpack.config.js(同vue.config.js),因为有默认配置,所以不存在这个文件webpack照样可以运行
默认配置:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
};
entry和output
- entry是用来配置入口文件的,可以是字符串,数据或对象类型,webpack默认支持js文件和json文件.
// 单入口单输出
entry: './src/index.js',
// 多入口单输出
entry: ['./src/index_1.js', './src/index_2.js'],
// 多入口多输出
entry: {
index: "./src/index.js", // chunkName为index
main: "./src/main.js" // chunkName为main
}
// output.filename也不能写死，webpack提供了一个占位符[name]，它会自动替换为对应的`chunkName`
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js' // [name]占位符会自动替换为chunkName
},
- output是用来设置输出配置的,该选项必须是对象类型,而且path和filename两个属性为必填属性,分别为:导出路径和导出名称,导出路径为绝对路径
mode
mode是用来配置打包方式,它有三个值: none,development和production
- none 不带任何打包配置
- development 指开发环境,会开启部分有利于调试的配置
- production 指生产环境,打包的文件会小很多,但不方便开发,用于项目上线
devtool
使用devtool开启sourceMap,会生成.map文件,该文件能帮助我们更好的调试代码,它能帮我们链接到断点对应的源代码的位置进行调试
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
devtool:"sourceMap",
};
modules
module的配置是一个对象,它有个rules属性,它是一个数组,可以设置各个loader的配置规则,而配置规则是有一个对象,有test属性和use属性,test属性一般是正则表达式,用来识别文件类型,use属性是一个数组,用来存放该文件类型使用的loader
module: {
rules: [
{
test: /\.css$/, // 识别css文件
use: ['style-loader', 'css-loader'] // 对css文件使用的三个loader
}
]
}
对于
use数组的顺序是有要求的，webpack会根据自后向前的规则去执行loader。也就是说，上面的例子webpack会先执行css-loader，再执行style-loader
如果要精确对对应的loader进行配置,则需要写成对象格式
//style-loader的配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{
// loader名称
loader: 'css-loader',
// loader选项
options: {
...
}
}
]
}
]
}
plugins
plugins属性可以让我们引入第三方插件,因为我们可以使用第三方插件来进行资源压缩管理和代码打包等
plugins: [
new htmlWebpackPlugin(),
new CleanWebpackPlugin(),
new miniCssExtractPlugin(),
new TxtWebpackPlugin()
]
plugins数组的先后顺序不影响结果
未完
