webpack笔记

"date" : "2021-09-11 11:01:53"
"classfiy" : "html"
"author" : "飞扬"
"viewTimes" : 275

[TOC]
> 需要先安装node.js

##基本步骤
1. 在需要打包的目录下运行：
	1. `npm init -y`
	2. `npm install webpack webpack-cli --save-dev`
2. 删除`package.json`内的`"main": "index.js"`新增`"private": true`
3. 根目录创建`webpack.config.js`
4. 加载CSS，运行：`npm install --save-dev style-loader css-loader`
5. 配置`webpack.config.js`完毕后运行`npx webpack --config webpack.config.js`打包

## 扩展
>- 安装参数：`--save-dev` 就是在开发模式下的插件依赖。简写：`-D`
- 安装参数：`--legacy-peer-deps` 忽略依赖项，比如安装`uglifyjs-webpack-plugin`的时候会报错，意思就是什么的以来版本号不对，加上这个参数就行了。
`--legacy-peer-deps`慎用，要不以后装其他插件就会报依赖错误

## 插件
### npm-run-all
>允许同时运行多条命令，例如监视多个webpack配置 
官网：https://github.com/mysticatea/npm-run-all
安装：`npm install npm-run-all --save-dev`

在`package.json`内的`scripts`新增：
```JSON
"watch": "npm-run-all --parallel watch_v2 watch_lcu",
"build": "npm-run-all --parallel build_v2 build_lcu"
```
然后：`npm run watch`

## 配置说明
> webpack.config.js 示例：

```
const path = require('path');
module.exports = {
	mode: 'development',
	//mode: 'production'
    devtool: 'inline-source-map',
	//入口文件
    entry: {
        index: './src/index.js',
        print: './src/print.js',
    },
	//输出文件
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
		//编译时清空旧的
        clean: true,
    },
    module: {
		//配置在moudles中import css
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
};
```
> package.json 示例：

```
{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "private": true,
  //定义打包命令行
  "scripts": {
    "build":"npx webpack --config webpack.config.js",
	//文件改动自动编译
	"watch": "npx webpack --config webpack.config.js --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.2.1",
    "webpack": "^5.52.1",
    "webpack-cli": "^4.8.0"
  }
}
```

### 配置生产和调试环境
```
npm install --save-dev webpack-merge
```
- `webpack.common.js`
```
常规配置
```
- `webpack.dev.js`
```
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
	mode: 'development',
	devtool: 'inline-source-map'
});
```
- `webpack.prod.js`
```
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
	mode: 'production',
});
```

### 拆分多次导入的模块以减少体积
`这里拆分出的模块如果未自动更新html的话要手动引用上。`
```
//在webpack.*.js内的 module.exports 中配置
optimization: {
    splitChunks: {
        cacheGroups: {
			//第三方模块
            vendor: {
                name: "common_3rd_libs",
                test: /[\\/]node_modules[\\/]/,
                chunks: "all",
                priority: 10 // 优先级
            },
			//自己编写的模块
            common: {
                name: "common_libs",
                test: /[\\/]src[\\/]/,
                minSize: 1024,
                chunks: "all",
                priority: 5
            }
        }
    },
}
```