初识 webpack

---

为什么选择 webpack?

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

现阶段前端开发使用的构建工具有webpack，grunt，gulp等。

由上图可以看出webpack具备了社区态丰富；配置灵活和插件化扩展；官更新迭代速度快等优点，因此选择webpack作为项目构建工具

---

一、环境搭建：安装 Node.js 和 NPM

• 安装 nvm（https://github.com/nvm-sh/nvm）

• 安装 Node.js 和 NPM

• npm是Nodejs下的包管理器。

  命令行输入 - nvm install v10.15.3安装node
  检查是否安装成功：node -v, npm -v

二、安装 webpack 和 webpack-cli

1.创建空目录和 package.json

代码如下（示例）：

·mkdir my-project
·cd my-project
·npm init -y

2.安装 webpack 和 webpack-cli

代码如下（示例）：

·npm install webpack webpack-cli --save-dev
//检查是否安装成功：./node_modules/.bin/webpack -v

---

三、webpack （webpack.config.js）配置组成

1、Webpack初体验：一个最简单的例子

2、通过 npm script 运行 webpack

四、webpack.config.js 解析

1.核心概念之 Entry

Entry 用来指定 webpack 的打包入口

依赖图的入口是 entry
对于非代码如图片、字体依赖也会不断加入到依赖图中

// 用法
// 单文件入口
module.exports = {
	entry: './src/index.js'
};
// 多文件入口
module.exports = {
	entry: {
		app: './src/app.js',
		adminApp: './src/adminApp.js'
	}
};

2.核心概念之 Output

Output 是来告诉 webpack 如何将编译后的文件输出到磁盘

// 用法 单入口配置
module.exports = {
	entry: './src/index.js'
	output: {
		filename: '[name][chunkhash:8].js’,
		path: __dirname + '/dist'
	}
};

3.核心概念之 Loaders

webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。其本身是一个函数，接受源文件作为参数，返回转换的结果。

// 用法 单入口配置
const path = require('path');
module.exports = {
	output: {
		filename: '[name].js'
	},
	module: {
		rules: [
			// 针对css文件做转义
			{ test: /\.css$/, use: ['css-loader'] }
		]
	}
};

4.核心概念之 Plugins

Plugins也就是插件，用于 打包输出文件的优化，资源管理和环境变量注入并作用于整个构建过程

// npm install html-webpack-plugin -D
const path = require('path');
module.exports = {
	output: {
		filename: 'bundle.js'
	},
	plugins: [
		new HtmlWebpackPlugin({template:
		'./src/index.html'})
	]
};

5.Mode 的内置函数功能

Mode 用来指定当前的构建环境是：production、development 还是 none
设置 mode 可以使用 webpack 内置的函数，默认值为 production

6.资源解析：解析 ES6

使用 babel-loader
babel的配置文件是：.babelrc

// npm install babel-loader @babel/preset-env @babel/proposal-class-properties -D
const path = require('path');
module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				use: 'babel-loader'
			}
		]
	}
};

添加完babel-loader后，通过npm install @babel/preset-env @babel/proposal-class-properties -D, 最后在项目根目录新建.babelrc文件，并配置相关选项即可。

{
	"presets": [
		"@babel/preset-env”
	],
	"plugins": [
		"@babel/proposal-class-properties"
	]
}

7.资源解析：解析 CSS

css-loader 用于加载 .css 文件，并且转换成 commonjs 对象
style-loader 将样式通过 < style> 标签插入到 head 中

// npm install css-loader style-loader -D
const path = require('path');
module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			}
		]
	}
};

8.资源解析：解析 Less 和 SaSS

less-loader 用于将 less 转换成 css

// npm install sass-loader css-loader style-loader -D
const path = require('path');
module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.sass$/,
				use: [
					'style-loader',
					'css-loader',
					'sass-loader'
				]
			}
		]
	}
};

9.资源解析：解析图片

url-loader 也可以处理图片和字体
可以设置较小资源自动转为base64

// npm install url-loader -D
const path = require('path');
module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: [{
					loader: 'url-loader’,
					options: {
						limit: 10240
					}
				}] 
			}
		]
	}
};

10.打包代码压缩

1. js代码压缩

   内置了 uglifyjs-webpack-plugin官方文档

// 用法
// npm install uglifyjs-webpack-plugin -D
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
	entry: {
		app: './src/app.js',
		search: './src/search.js'
	},
	output: {
		filename: '[name][chunkhash:8].js',
		path: __dirname + '/dist'
	},
	plugins: [
		 new UglifyJsPlugin({
		      uglifyOptions: {
		        compress: {
		          warnings: false,
		          drop_console: true
		        },
		        mangle: {
		          safari10: true
		        }
		      },
		      sourceMap: config.build.productionSourceMap,
		      parallel: true
    	  }),
		]
	};

2. css代码压缩

	// npm install optimize-css-assets-webpack-plugin cssnano -D
	//使用optimize-css-assets-webpack-plugin配合cssnano
	module.exports = {
	entry: {
		app: './src/app.js',
		search: './src/search.js'
	},
	output: {
		filename: '[name][chunkhash:8].js',
		path: __dirname + '/dist'
	},
	plugins: [
		 new OptimizeCSSAssetsPlugin({
			 assetNameRegExp: /\.css$/g,
			 cssProcessor: require('cssnano’)
		 })
		]
	};

3. html代码压缩

// 使用html-webpack-plugin插件，设置压缩参数
module.exports = {
	entry: {
		index: './src/index.js',
	},
	output: {
		filename: '[name][chunkhash:8].js',
		path: __dirname + '/dist'
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src/index.html’),
			filename: 'index.html’,
			chunks: ['index’],
			inject: true,
			minify: {
				html5: true,
				collapseWhitespace: true,
				preserveLineBreaks: false,
				minifyCSS: true,
				minifyJS: true,
				removeComments: false
			}
		})
	]
};

11.什么是文件指纹？

文件指纹是指打包后输出的文件名的后缀

webpack需要设置相关属性即可生成文件指纹：

Hash：和整个项Mu的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改
Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会造成不同的 chunkhash 值
Contenthash：根据文件内容来定义 hash ，文件内容不变，则 contenthash 不变

// 设置 output 的 filename，使用 [chunkhash]
module.exports = {
	entry: {
		app: './src/app.js',
		search: './src/search.js'
	},
	output: {
		filename: '[name]
		.js',
		path: __dirname + '/dist'
	}
};
// css 图片等静态资源均可使用文件指纹