Webpack 复习小结
nodejs学习参考
node常用命令：
node xxx.js
执行js文件
npm init -y
初始化package.json
npm i 软件包名
下载软件包到本地
npm i 软件包名 -g
下载软件包到全局
npm uni 软件包名
删除软件包
系统优化CDN使用
CDN for free
需求：开发模式使用本地第三方库，生产模式下使用CDN加载引用
步骤：
1.在index.html文件中引入第三方CDN地址，并用模板语法判断
index.html
...
<% if(htmlWebpackPlugin.options.useCDN){ %>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js">script>
<% } %>
...
webpack.config.js
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', // html模板文件
filename: './index.html', // html输出文件名
useCDN: process.env.NODE_ENV === 'production',
favicon: './public/favorite.png'
}),
],
2.配置webpack.config.js中externals外部扩展选项（防止某些import的包被打包）
/*生产模式下，排除掉 使用CDN引入加载的资源*/
if (process.env.NODE_ENV === 'production') {
config.externals = {
//key : import from 语句后面的字符串
//value: 留在原地的全局变量（最好和CDN在全局暴露的变量一致）
'axios': 'axios'
}
}
多页面打包
未成功加载
开发环境调错
问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
source map ：可以准确追踪error和warning在原始代码中的位置
设置：webpack.config.js配置devtool选项
/*开发模式下使用devtool = inline-source-map，便于查找错误*/
if (process.env.NODE_ENV === 'development')
config.devtool = 'inline-source-map'
inline-source-map选项：把源码的位置信息一起打包在js文件内
注意：source-map仅适用于开发环境，不要在生产环境使用(防止被轻易查看源码位置)
打包模式
打包模式：告知webpack使用响应的内置优化
开发模式：development 调试代码；实施加载；模块热替换等；适用于本地开发
生产模式：production 压缩代码；资源优化；更轻量；适用于打包上线
设置方式1：
package.json
"build": "webpack --mode=production",
"dev": "webpack serve --open --mode=development"
设置方式2：
webpack.config.js
const config = {
//mode: 'development',
mode: 'production',
}
命令行设置的优先级高于配置文件中的，推荐使用命令行设置
应用
需求：在开发模式下用style-loader内嵌，加载更快，再生产模式下提取css代码
借助cross-env（跨平台通用）包命令，设置参数区分环境
步骤：
- 下载
cross-env软件包到当前项目
npm i cross-env --save-dev - 配置自定义命令，传入参数名和值（会绑定到
process.env对象下）
"build": "cross-env NODE_ENV=production webpack --mode=production",
"dev": "cross-env NODE_ENV=development webpack serve --open --mode=development"
- 在
webpack.config.js区分不同环境使用不同配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
/*css 分别打包*/
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/*css 代码压缩插件*/
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const webpack = require('webpack')
const config = {
// mode: 'development',
entry: {
index: './src/main.js',
// print: './src/print.js',
},
// devtool: 'inline-source-map',
devServer: {
/*默认以 public/index.html ，可以将dist目录启动为服务*/
// static: './dist',
//启动服务后自动弹出页面
// open: true
},
module: {
rules: [
{
test: /\.css$/i,
// use: [MiniCssExtractPlugin.loader, "css-loader"],
/*开发模式下， 内嵌css样式，让热替换更快
生产模式下提取css代码，让浏览器缓存 并行下载js和css文件*/
use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.less$/i,
use: [
// compiles Less to CSS
process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html', // html模板文件
filename: './index.html', // html输出文件名
useCDN: process.env.NODE_ENV === 'production',
favicon: './public/favorite.png'
}),
new MiniCssExtractPlugin({
}),
//允许在 编译时 将前端代码中的变量替换为其他值或表达式
new webpack.DefinePlugin({
// 定义...
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
optimization: {
runtimeChunk: 'single',
minimizer: [
// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
`...`,
new CssMinimizerPlugin(),
],
},
/*配置别名变量*/
resolve: {
alias: {
'@': path.join(__dirname, 'src')
}
}
}
/*开发模式下使用devtool = inline-source-map，便于查找错误*/
if (process.env.NODE_ENV === 'development')
config.devtool = 'inline-source-map'
/*生产模式下，排除掉 使用CDN引入加载的资源*/
if (process.env.NODE_ENV === 'production') {
config.externals = {
//key : import from 语句后面的字符串
//value: 留在原地的全局变量（最好和CDN在全局暴露的变量一致）
'axios': 'axios'
}
}
module.exports = config