一直使用webpack,上次也分享过webpack配置es6~9的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4的知识点梳理一次。方便一些刚刚入行的人学习,也是对自己的一种总结与提高

一、几个盲点的解释

1、全局安装与局部安装
- 对于一般的新手都有一个疑惑我是全局安装还是本项目中安装(局部安装),个人建议,现在前端发展那么快,我们使用局部安装的方式更好(使用最新的技术栈)。
- 我们知道javascript是弱语言,有局部变量和全局变量,其实全局安装与局部安装的性质与函数的全局变量与局部变量有点类似。
2、安装包的时候--save与-D的区别
一般我们仅仅是在开发环境依赖的包直接使用-D就可以,这样就会在项目的package.json文件中的devDependencies新增相关的配置信息
```
npm install webpack webpack-cli -D
```
--save是会放在package.json文件的dependencies中
记住仅仅是开发环境需要使用的包就使用-D

二、`webpack`所谓的0配置使用

webpack是基于配置的前端脚手架,在实际项目中开发需要配置你需要的插件与加载器。

1、webpack最基本的基重要的是:
plugins:配置插件的
module:主要配置一些加载器
2、初始化项目
创建一个文件夹webpack-demo
初始化生成package.json文件
```
npm init --yes
```
3、安装webpack最基本的依赖包
```
npm install webpack webpack-cli -D
```
4、创建一个文件夹src并在里面创建一个index.js的文件
5、在命令行中运行(先忽视警告信息)
```
npx webpack
```
6、在生成的dist文件夹下会生成一个大包好的main.js文件,在该文件夹下创建一个index.html文件引入main.js,在浏览器中查看控制台是否输出信息。

二、`webpack`的配置

1、在项目下创建一个webpack.config.js文件

2、可以配置的有

const path = require('path');

module.exports = {
  entry: '',  // 打包文件的入口
  output: {}, // 打包后的出口文件配置
  devServer: {}, // 开发服务器
  module: {}, // 模块配置
  plugins: {}, // 插件的配置
  mode: 'development', // ['development', 'production']模式
  resolve: {}, // 配置解析
}

三、配置开发环境(在内存中打包)

1、安装包
```
npm install webpack-dev-server -D
```

2、在webpack.config.js中配置入口文件与出口文件

module.exports = {
  entry: './src/index.js',  // 打包文件的入口
  output: {
    filename: 'build.js',
    // 注意这个位置必须是绝对路径
    path: path.join(__dirname, 'dist')
  },
  ...
}

3、配置开发devServer

module.exports = {
  ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 8000,
    compress: true, // 自动压缩
    open: true, // 自动打开浏览器
  },
}

4、在package.json中配置命令

...
"scripts": {
	"dev": "webpack-dev-server",
},
...

5、调试性的运行命令(会自动打开浏览器,但是里面没任何信息展示)
```
npm run dev
```

6、使用html-webpack-plugin自动生成html页面的插件

1.安装包

npm install html-webpack-plugin -D

2.在webpack.config.js中引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

3.在plugins中配置

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html',
		title: 'webpack测试',
	})
],

4.关于index.html的内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%=htmlWebpackPlugin.options.title%></title>
</head>

<body>

</body>

</html>

5.关于html-webpack-plugin的配置请查看
6、运行npm run dev直接打开浏览器,打开控制台可以查看到打印信息

7、创建打包命令(在package.json中添加命令)

"scripts": {
	"dev": "webpack-dev-server",
	"build": "webpack"
},

8、使用哈希值的方式创建随机生成数字,解决缓存的问题

1、对生成的js文件生成随机数

output: {
	filename: 'build.[hash].js', // 默认生成20位的哈希值
	// filename: 'build.[hash:8].js' 可以定制生成多少位的随机数
	// 注意这个位置必须是绝对路径
	path: path.join(__dirname, 'dist')
},

2、对html里面引入的js生成哈希值(会生成?哈希值)

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html',
		title: 'webpack测试',
		hash: true,
	})
],

3、运行命令npm run build可以查看dist文件夹下的文件是否带了尾巴(注意点:要更新文件打包会生成新的,如果没改动文件,仅仅是多次打包是一样的)

4、运行后的效果

<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>

9、关于html-webpack-plugin其它常用的配置

new HtmlWebpackPlugin({
  ...
  minify: {
    removeAttributeQuotes: true, // 去除双引号
    collapseWhitespace: true, // 合并代码到一行
  }
})

四、清除之前的`plugin`的插件的使用

我们对每次打包后的缓存文件进行删除确保每次都是最新的

1、安装
```
npm install clean-webpack-plugin -D
```

2、在webpack.config.js中使用

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
	new CleanWebpackPlugin(['./dist']),
	...
],

五、关于`webpack`入口文件的几种方式

1、单一入口文件(参考上面)

2、多入口文件(可以写成一个数组),共同打包带一个出口文件中

module.exports = {
  mode: 'development',
  entry: [
    './src/index.js',
    './src/a.js'
  ],
  output: {
    filename: 'build.[hash:8].js',
    // 注意这个位置必须是绝对路径
    path: path.join(__dirname, 'dist')
  }
}

3、多入口多出口多模板的模式

1.入口文件与出口文件的配置

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    a: './src/a.js'
  },
  output: {
    filename: '[name].[hash:8].js',
    path: path.join(__dirname, 'dist')
  }
}

2.模板的配置(需要注明输出文件的名字)

...
plugins: [
    new CleanWebpackPlugin(['./dist']),
    new HtmlWebpackPlugin({
      filename: 'index.html', // 注明打包后的文件名
      template: './src/index.html',
      title: 'webpack测试1',
      hash: true,
      chunks: ['index']  // 注明选择哪个js文件
    }),
    new HtmlWebpackPlugin({
      filename: 'a.html',
      template: './src/index.html',
      title: 'webpack测试2',
      hash: true,
      chunks: ['a']
    })
  ],
}
...

3.如果文件很多,可以采用读取文件的方式

...
// 定义入口文件
let entry = {};
const glob = require("glob");
let HtmlPlugin = [];

glob.sync('./src/*.html').forEach(item => {
	const filename = path.basename(item).toLowerCase();
	const chunk = filename.replace('.html', '');
	entry[chunk] = `./src/${chunk}.js`;
	HtmlPlugin.push(
		new HtmlWebpackPlugin({
			filename: filename,
			template: path.resolve(item),
			inject: 'body',
			title: 'webpack测试',
			chunks: [chunk],
			hash: true,
			minify: {
				removeAttributeQuotes: true, // 去除引号
				collapseWhitespace: false, // true代码合并成一行
			}
		})
	)
})
module.exports = {
	entry: entry, // 使用读取的入口文件(注意文件不能少[html的和js的名字要一致])
	output: {
		path: path.join(__dirname, 'dist'),
		filename: '[name].[hash:8].js', // 会自动根据上面的name来取名字
	},
	devServer: {
		contentBase: path.join(__dirname, 'dist'),
		port: 8000,
		compress: false,
		open: true,
	},
	plugins: [
		new CleanWebpackPlugin(), // 每次打包清空dist文件夹
		...HtmlPlugin,
	],
	module: {},
	resolve: {}
}

六、`webpack`热更新的使用

1、根据上面的方式我们可以实现,修改js代码浏览器会刷新,但是是类似我们人工的刷新(如果是有状态机的数据的时候会丢失数据)
2、我们可以使用webpack自带的一个热更新的插件

3、使用方式

1.在webpack.config.js中配置

const webpack = require('webpack');
...
plugins: [
    new webpack.HotModuleReplacementPlugin(), // 每次修改代码在开发环境的时候会自动刷新
    ...
]
...

2.在主要的入口index.js文件中加上

if (module.hot) {
  module.hot.accept();
}