课程链接：1.2.4-自定义Webpack配置_哔哩哔哩_bilibili
webpack cli 命令
npx webpack --help 显示所有命令
npx webpack 打包安装生成dist文件夹
npx webpack --stats detailed 显示安装细节
npx webpack --entry ./src/index.js --mode production 以index.js作为入口文件
Webpack配置
- 使用 export default func 之后，import func 注意不要加花括号
- 为了取代cli命令npx webpack --entry ./src/index.js --mode production ，采用自定义webpack配置,根目录下创建webpack.config.js
const path = require('path');
module.export = {
entry: '',
output: {
filename: 'bundle.js',
// __dirname 表示webpack.config.js所在的目录，path.resolve()方法可以将路径转换为绝对路径
path: path.resolve(__dirname, '/dist')
}，
mode: 'none'
}
- 运行npx webpack, 获得bundle.js, 在index.html中引入bundle.js文件
自动引入资源
- 什么是插件
如下图webpack编译过程中需要一些工具来执行特定的任务（打包优化，资源管理..），这些工具就是plugin
插件
Webpack插件列表：插件 | webpack 中文文档 - 使用HtmlWebpackPlugin自动引入资源文件
- 安装插件 npm install -D html-webpack-plugin
- 配置插件
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin') // 引入HTMLWebpackPlugin插件
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
mode: 'none',
plugins: [
new HTMLWebpackPlugin({
template: './index.html',
// 生成的文件名，默认为index.html
filename: 'app.html',
inject: 'body', // 注入的位置，默认为head
})
]
}
- 运行npx webpack,生成/dist/app.html 包含了以下引用
<script defer src="bundle.js"></script></body>
- 清理dist历史文件
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
clean: true // 配置清理dist文件
},
搭建开发环境
- mode设置为development
- 使用sourcemap进行代码调试
注意，介于安全与性能风险的考虑，以下配置只适合开发环境
更新webpack.config.js
mode: 'development',
devtool: 'inline-source-map', // 生成源代码到打包后代码的映射，便于调试
- 使用watch mode（观察者模式）
每次编译代码时，手动运行npx webpack会显得很麻烦。我们可以在webpack启动时添加“watch”参数。如果其中一个文件被更新，代码将重新编译，不需要手动运行整个构建
npx webpack --watch - 使用webpack-dev-server
提供了一个基本的web server, 并且具有live reloading(实时重新加载)功能，编译完成后自动刷新浏览器页面
- 安装插件 npm install -D webpack-dev-server
- 添加配置
// 启动webpack-dev-server服务
devServer: {
static: './dist', // 告诉服务器从什么位置查找文件
},
注意：webpack-dev-server在编译之后不会写入到任何输出文件。而是将bundle文件保留在内存中，然后将它们serve到server中，就好像它们时挂载在server根路径上的真实文件一样
- 运行 npx webpack-dev-server
- 打开控制台打印的 url http://localhost:8080/
资源模块
4中类型：
- asset/resource 将文件输出到指定目录，并生成唯一的文件名
- asset/inline 将文件转换为base64编码，直接嵌入到代码中
- asset/source 导出资源的源代码
- asset 在导出一个data URL和发送一个单独的文件之间自动选择
loader
- 为了在Javascript模块中import一个CSS文件，你需要安装style-loader和css-loader,并在module配置中添加这些loader:
npm install -D style-loader css-loader less-loader
{
test: /\.css|less$/,
use: ['style-loader', 'css-loader', 'less-loader'] // 使用style-loader和css-loader处理CSS文件,loader链式调用，这里的顺序是逆序
}
- 抽离和压缩css
- 抽离 npm install mini-css-extract-plugin -D
- 压缩 npm install css-minimizer-webpack-plugin -D
optimization: {
minimizer: [
new CssMinimizerPlugin()
]
}
- 加载font字体
