webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
Webpack改变的是前端的开发模式,使前端可以进行模块化开发,基于ESModule。现在主流的框架开发都基于webpack。
entry
入口文件设置,只有和入口文件产生模块关联,最终才能被webpack打包
module.exports = {
// 单入口写法
entry: "./src/main.js",
// 多入口数组写法
entry: [
"./src/main.js",
"./src/index.js"
],
// 多入口对象写法 用对象可以自定义未来输出的名字
entry: {
main: "./src/main.js",
index: "./src/index.js"
}
}
output
配置出口文件的格式以及文件名
module.exports = {
entry: ...,
output: {
// 文件输出的名字 [name] [hash] [hash:10]
filename: "[name].[hash:8].js",
// output文件输出的路径 一般不用设置
path: __dirname + '/dist'
}
}
loader
webpack原生只能识别js模块,第三方开发了很多的loader,可以让webpack去识别成模块
plugin
webpack利用插件可以实现很多的功能
mode
- development
- production
- 自定义模式
一般我们在命令中设置模式
webpack --mode production
webpack --mode development
package.json
{
"scripts": {
"build": "webpack --mode 模式"
}
}
也可以在配置文件中进行设置
module.exports = {
mode: 'production',
// 或者
mode: 'development'
}
webpack需要配置文件
需要在我们项目的根目录创建配置文件webpack.config.js
module.exports = {
mode: "",
entry: "",
output: "",
module: {
},
plugins: []
}
webpack5中哪怕不写配置文件,也可以正常使用。