webpack5 学习手册

1. 初始化 webpack 项目 npm init -y （初始化一个 package.json 文件)

2. npm i webpack webpack-cli -D 下载这两个依赖包

3. npx webpack ./src/main.js --mode development //【 入口文件 打包模式 】 npx webpack 指令

// npx webpack ./src/main.js --mode production // 生产环境

4. 当你的项目下创建了 webpack.config.js 并在里面配置了相应 可以直接npx webpack 即可运行打包；【同3的升级版】

5. 配置css 规则
npm install style-loader css-loader --save-dev

{
test: /\.css$/,
use: [
//执行顺序，从左到右 (从上到下)
"style-loader", //将js中的css创建style属性添加到html中生效
"css-loader", //将css资源编译成commonjs的模块到js中
],
},

6. npm install --save-dev html-webpack-plugin

plugins: [new HtmlWebpackPlugin()],

7. npm install --save-dev webpack-dev-server 执行 npx webpack serve //开发环境 修改自动打包

devServer: {
static: {
directory: path.join(__dirname, "public"),
},
compress: true,
port: 9000,
},

8. 为了配置 开发环境与生产环境的config 新建目录config 创建创建 webpack.config.dev.js webpack.config.prod.js
执行 npx webpack serve --config ./config/webpack.config.dev.js 就可以启动开发环境
同理： npx webpack --config ./config/webpack.config.prod.js 打包生产环境资源

9. 在package.json 配置

"scripts": {
"dev": "webpack serve --config ./config/webpack.config.dev.js",
"build": "webpack --config ./config/webpack.config.prod.js"
},

启动开发环境 :npm run dev
打包生产环境：npm run build

10. npm install --save-dev mini-css-extract-plugin //将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
<见下面的webpack.config.prod.js>

11. npm i postcss-loader postcss postcss-preset-env -D //样式兼容性处理
注：加载器中的配置 要在css-loader下面 在less-loader sass-loader的前面

12 npm install css-minimizer-webpack-plugin --save-dev // 压缩css

13. devtool 脚本的映射
开发环境 devtool:"cheap-module-source-map" //错误只提示到行
生产环境 devtool:"source-map" //错误提示到行、列

14. 热模块替换 （开发环境）
dev-serve 设置 hot:true
15: 加载器里面 oneOf <见下面的webpack.config.prod.js>

webpack.config.prod.js：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125

const path = require("path"); // node 核心模块  专门处理路径问题 const HtmlWebpackPlugin = require("html-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); //封闭一个方法 function getStyleLoader(pre) {   return [     //可以使用多个loader     //执行顺序，从左到右 (从上到下)     // "style-loader", //将js中的css创建style标签添加到html中生效     MiniCssExtractPlugin.loader, //提取css成单独的文件     "css-loader", //将css资源编译成commonjs的模块到js中     {       loader: "postcss-loader",       options: {         postcssOptions: {           plugins: [             "postcss-preset-env", //能解决大多数样式兼容的问题           ],         },       },     },     pre,   ].filter(Boolean); //filter（undefined） 过虑掉传空的值 }   module.exports = {   //入口   entry: ["./src/main.js"], //相对路径  , "./public/index.html", "./public/test.html"   //输出   output: {     //文件的输出路径     // __dirname nodejs的变量 代表当前文件的文件夹目录     path: path.resolve(__dirname, "../dist"), //绝对路径     filename: "js/main.js", //输出到对应的目录下     clean: true, //自动清空上次打包的内容   },   //加载器   module: {     rules: [       //loader 的配置       {         oneOf: [           //只被其中一个处理           {             test: /\.css$/,             //loader:'xxx',  // 只能使用一个loader             use: getStyleLoader(),           },           {             test: /\.less$/,             use: getStyleLoader("less-loader"),             // [             //   MiniCssExtractPlugin.loader,             //   "css-loader",             //   {             //     loader: "postcss-loader",             //     option: {             //       postcssOptions: {             //         plugins: [             //           "postcss-preset-env", //能解决大多数样式兼容的问题             //         ],             //       },             //     },             //   },             //   "less-loader",             // ], //下载 less-loader 依赖           },           {             test: /\.sass$/,             use: getStyleLoader("sass-loader"),             // [             //   MiniCssExtractPlugin.loader,             //   "css-loader",             //   {             //     loader: "postcss-loader",             //     option: {             //       postcssOptions: {             //         plugins: [             //           "postcss-preset-env", //能解决大多数样式兼容的问题             //         ],             //       },             //     },             //   },             //   "sass-loader",             // ], //下载 sass-loader 依赖           },           {             test: /\.(png|jpe?g|gif|webp|svg)$/,             type: "asset",             parser: {               dataUrlCondition: {                 //小于10kb的图转化为base64                 //优化 减少请求数 缺点：体积会变大一丢丢                 maxSize: 10 * 1024, //10kb               },             },             generator: {               //输出图片名称               //hash:10  hash值取前10位               filename: "images/[hash:10][ext]",             },           },         ],       },     ],   },   //插件   plugins: [     //插件的配置     new HtmlWebpackPlugin({       //模板  以public/index.html 为模板       //新的html 文件特点 1：结构和原文一致 2.自动引入打包输出的资源       template: path.resolve(__dirname, "../public/index.html"),     }),     new MiniCssExtractPlugin({       filename: "css/main.css",     }),     new CssMinimizerPlugin(),   ],     //模式   mode: "production", //production   devtool: "source-map", //错误提示到行、列 };

　　webpack.config.dev.js：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

const path = require("path"); // node 核心模块  专门处理路径问题 const HtmlWebpackPlugin = require("html-webpack-plugin");   module.exports = {   //入口   entry: "./src/main.js", //相对路径   //输出   output: {     //文件的输出路径     // __dirname nodejs的变量 代表当前文件的文件夹目录     path: path.resolve(__dirname, "../dist"), //绝对路径     filename: "js/main.js", //输出到对应的目录下     clean: true, //自动清空上次打包的内容   },   //加载器   module: {     rules: [       //loader 的配置       {         oneOf: [           //只被其中一个处理           {             test: /\.css$/,             //loader:'xxx',  // 只能使用一个loader             use: [               //可以使用多个loader               //执行顺序，从左到右 (从上到下)               "style-loader", //将js中的css创建style标签添加到html中生效               "css-loader", //将css资源编译成commonjs的模块到js中             ],           },           {             test: /\.less$/,             use: ["style-loader", "css-loader", "less-loader"], //下载 less-loader 依赖           },           {             test: /\.sass$/,             use: ["style-loader", "css-loader", "sass-loader"], //下载 sass-loader 依赖           },           {             test: /\.(png|jpe?g|gif|webp|svg)$/,             type: "asset",             parser: {               dataUrlCondition: {                 //小于10kb的图转化为base64                 //优化 减少请求数 缺点：体积会变大一丢丢                 maxSize: 10 * 1024, //10kb               },             },             generator: {               //输出图片名称               //hash:10  hash值取前10位               filename: "images/[hash:10][ext]",             },           },         ],       },     ],   },   //插件   plugins: [     //插件的配置     new HtmlWebpackPlugin({       //模板  以public/index.html 为模板       //新的html 文件特点 1：结构和原文一致 2.自动引入打包输出的资源       template: path.resolve(__dirname, "../public/index.html"),     }),   ],   //开发服务器   devServer: {     // static: {     //   directory: path.join(__dirname, "public"),     // },     host: "localhost",     compress: true,     port: 9000,     open: true,     hot: true,   },   //模式   mode: "development", //production   devtool: "cheap-module-source-map", //错误只提示到行 };