1 webpack 5个核心概念
- Entry 入口,指示webpack以那个文件作为入口文件,分析构建内部依赖图。
- Output 输出,指示webpack打包后的资源bondles输出到那里去,以及如何命名。
- Loader, 让webpack能够去处理那些非js文件(webpack只能理解js)
- Plugins 插件:可以用于执行范围更广的任务。插件的范围包括:从打包优化和压缩,一直到重新定义环境中的变量等
- Mode 模式:指示webpack使用相应模式的配置。
- development:本地测试环境,将process.env.NODE_ENV的值设为development
- production:线上运行环境,将process.env.NODE_ENV设为production
2 运行指令
默认运行指令
- 开发环境 webpack ./src/index.js -o ./build --mode=development
以 ./src/index.js作为入口文件,打包输出到./build中
- 生产环境 webpack ./src/index.js -o ./build --mode=production
以 ./src/index.js作为入口文件,打包输出到./build中
3 配置
配置文件为webpack.config.js
- output有两个参数,filename打包文件的名字和path文件存放地址
const { resolve } = require('path') module.exports = { ... output: { filename: 'built.js', // 打包文件的名字 path: resolve(__dirname, 'build') // 文件存放的路径, // resolve:path中的一个方法,把参数从右向左拼接,解析成绝对路径 // __dirname: 指的是当前文件的目录 }, ... }
- module,参数rules一个数组用于处理非js文件,loader使用流程:1 下载 2 使用(配置)
module.exports = { ... module: { rules: [ { test: /\.css$/, // 解析的文件类型 use: [ // 用于解析的loader,顺序从下到上,从右到左 'style-loader', // 创建style标签,将js中的样式资源插入进去马,添加到head中生效 'css-loader' // 将css文件变成commonjs模块加载js中,里面内容是样式字符串 ] }, { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' // 将less文件转为css ] } ] }, ... }
- plugins 使用流程:1 下载 2 引入 3 使用
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { ... plugins:[ // html-webpack-plugin // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS) // 需求:需要有机构的HTML文件 new HtmlWebpackPlugin({ // 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS) template: './src/index.html' }) ], ... }
- mode
alias 别名配置,可以将一些常用的文件地址配置简写
**更新中