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（跨平台通用）包命令，设置参数区分环境
步骤：

1. 下载 cross-env软件包到当前项目
   npm i cross-env --save-dev
2. 配置自定义命令，传入参数名和值（会绑定到process.env对象下）

"build": "cross-env NODE_ENV=production webpack --mode=production",
"dev": "cross-env NODE_ENV=development webpack serve --open --mode=development"

3. 在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 CSSprocess.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