Webpack

Posted 2021-06-01 Jinhao Chen

五大部分

1. Entry：程序入口文件，webpack通过以入口文件为起点，解析所需的依赖包进行打包，一般为index.js
2. Output
3. Loader：默认webpack只能打包javascript和json文件，如果要打包css和img等静态资源文件，需要loader，loader将资源文件转为javascript代码，交给webpack打包，loader与loader之间是链式调用
4. Plugins：功能比Loader更多
5. Mode：分为development和production两个模式

   

webpack功能

1. 将ES6语法转为浏览器可以识别的语法
2. 打包js和img等资源文件
3. 在production模式，会自动压缩js文件

   

   

Webpack 常用loader

1. Style-loader：将css转为的js字符串放在创建的style标签中，并将style标签放在head标签中
2. Css-loader：将css文件转为js字符串
3. Url-loader：用于图像
4. File-loader：用于非图像
5. html-loader: 打包html文件中的img标签
6. Postcss-loader：css兼容性，与postcss-preset-env插件配合使用
7. Thread-loader：多进程打包

   

Webpack 常用插件

1. Htmlwebpackplugin
2. Mini-css-extract-plugin：抽取单独的css文件
3. Postcss-preset-env：和postcss-loader配合，实现css的兼容
4. optimizecss：压缩css
5. Eslint-webpack-plugin：配置代码规范，注意第三方库应该不检查

   

例子

1. 一般使用单入口
2. 将其他node_modules单独打包出来
3. loader是写在module.rules数组中rule对象中的, rule对象有两个属性, 一个是 test（用正则匹配文件名）, 另一个是 use, use是一个数组, 每个数组元素是一个loader配置对象, 包括 loader 和 options 两个属性, 如果不进行配置, 可以直接写对应的loader字符串，use中调用loader的顺序是逆序的
4. 配置devServer，要使用npx webpack serve 启动

   

const path = require(\'path\') const HtmlWebpackPlugin = require(\'html-webpack-plugin\')     module.exports = {     mode: \'development\',     // 单入口     entry: \'./src/index.js\',     // 多入口     // 一条记录对应一个bundle     // entry: {     //     // key 为生成文件的名字     //     index: \'./src/index.js\',     //     test: \'./src/index.js\'     // },     output: {         // name 是 entry 中的 index 或者 test          filename: \'[name]-[contenthash:10].js\',         // 输出的根目录         path: path.resolve(__dirname, \'dist\')     },     module: {         // 配置rule对象         rules: [             {                 test: /\\.css$/,                 // use 中的 loader 是逆序调用的                 use: [                     // 创建 style 标签, 将使用 js 字符串表示的 css 样式添加到 style 标签中, 并放在 head 标签中                     \'style-loader\',                     // 将 css 源代码使用 js 的字符串表示                     \'css-loader\'                 ]             },             {                 test: /\\.less$/,                 use: [                     \'style-loader\',                     \'css-loader\',                     \'less-loader\'                 ]             },             {                 test: /\\.(jpg|gif|png)$/,                 use: [                     {                         loader: \'url-loader\',                         options: {                             // 如果图片小于 8 * 1024 B 则对图像进行base64编码                             limit: 8 * 1024,                             name: \'[hash:10].[ext]\'                         }                     }                 ]             },             {                 test: /\\.html$/,                 use: [                     {                         // 用于处理html中img标签                         loader: \'html-loader\'                     }                 ]             }         ]     },     plugins: [         new HtmlWebpackPlugin({             template: \'./src/index.html\'         })     ],           // 命令行使用 npx webpack serve 启动 devServer     // devServer 的打包结果不会保存到dist目录中，而是保存在内存中，所以dist中没有文件     // 热更新, 只针对 js 代码     devServer: {         // 打包的目标目录         contentBase: path.resolve(__dirname, \'dist\'),         // gzip 压缩         compress: true,         port: 8888,         // HMR 功能 hot module replace         hot: true,         // 自动打开默认浏览器         open: true     },     // 将项目使用到的 nodes_modules 中的库单独打包出来（只有大于30kb才会分割），不会重复打包chunk     optimization: {         splitChunks: {             chunks: \'all\'         }     },     externals: {         // key 是 npm 的报名         // value 为 npm 的包导入用到的名字         jquery: \'$\'     } }