Webpack学习笔记

1.什么是webpack

​ webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。

• webpack的主要作用
  • 打包资源
  • 提升兼容性
  • 实现按需加载

2.为什么要使用Webpack

​ 我们知道在前端页面引入js脚本的时候，都是通过script标签进行引入。但是随着网站体量大变大，功能的丰富，将所有的功能写入到一个js中，已经不再现实。为了便于开发、测试和维护，所以肯定是要分模块开发的。通过模块把需求拆分，减小开发难度。这就表示需要有多个js文件，需要引入页面中。这就会带来多次网络请求，而且这些js还需要有加载的先后顺序，来保证脚本的正常运行。

​ 能不能实现在开发的时候，分模块开发，在项目发布的时候将这些js整合成一个文件进行发布。webpack就是为了这个目的而研发的。它通过一个入口和模块之间的依赖关系，来实现代码整合。通过代码的整合，减少了网络请求的次数，在保证模块开发的基础上，提升了加载速度。

3.原理

​ webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。webpack就是识别你的 入口文件，一步一步识别你commonjs或者amd之类的模块化规范的模块依赖，来打包你的代码。webpack做的就是分析代码。转换代码，编译代码，输出代码。

4.loaders

​ 刚刚我们所说的都是js文件的合并，webpack本身就是来打包js文件的。但是一个web项目，不可能只有js组成，还有一些css，图片等其他资源文件。这时就必须使用loaders来，配合web工程的打包。

​ webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用。

使用时可以去webpack-loaders根据文件类型，选择需要的loader：https://www.webpackjs.com/loaders/

5.插件

​ 虽然webpack已经把多个js，多种文件打包整合到了一起，但是打包好的资源，不能直接使用，最后还是需要引入到HTML的标签中，浏览器才可以真正使用。但是手动添加又十分麻烦。这时候插件就能显示出它的优势了。

比如我们可以设置HTML模版，让打包好的js，css等资源，直接放入对应的HTML中，我们只需要在浏览器中直接刷新就好。

​ 插件的作用，就是webpack来实现核心功能，插件来将打包好的内容与具体项目进行结合。来实现打包到应用的最后一步，让我们的webpack更加易用。

使用时可以去webpack插件选择：https://www.webpackjs.com/plugins/

6.配置文件

​ 我们上面说了一堆的内容，那么如何去使用这些内容的配置呢？这就涉及到webpack的配置文件。

​ 在整个项目的根目录下，建立一个：webpack.config.js文件。这个文件就是告诉webpack打包规则的配置文件。当我们使用webpack打包命令，没有指定打包的文件时。这时webpack就会按照配置文件进行打包。

const path = require('path'); //引入node原生模块path
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const ExtractTextPlugin = require("extract-text-webpack-plugin");//通过 npm 安装

module.exports = {
	mode: 'development',//打包模式，影响项目大小和调试
	entry: {
		leader:'./src/js/leader_pc_index.js'
	},//js入口文件路径
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'js/[name].js'
	},//js出口文件路径
	module: {
		rules: [{
				test: /\.(png|jpg|gif)$/,
				use: [{
					loader: 'file-loader',
					options: {
						outputPath: 'pic'
					},
				}],
			}, {
				test: /\.css$/,
				use: ExtractTextPlugin.extract({
					fallback: "style-loader",
					use: "css-loader",
					publicPath:"../"
				})
			},
			{
				test: /\.html$/,
				loader: 'html-withimg-loader'
			}
		]
	},//配置loaders，处理非js文件
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/leader_pc_index.html',
			filename: 'leader.html'
		}),
		new ExtractTextPlugin("style/leader.css"),
	]//配置插件，提升易用性
};

具体的loader和插件的用法，可以去npm或github上去查看，上面会有详细的配置教程。