前端必备--Webpack

一、Webpack是什么？

Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。
一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。

二、Webpack 的优点？

专注于处理模块化的项目，能做到开箱即用一步到位；
通过 Plugin 扩展，完整好用又不失灵活；
使用场景不仅限于 Web 开发；
社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；
良好的开发体验

三、安装

全局安装：npm install -g webpack
npm install -g webpack-cli
项目依赖：npm install --save-dev webpack
  npm install --save-dev webpack-cli

四、Webpack 基本配置
需要在项目的根目录下创建一个文件 webpack.config.js
1、基本配置–入口
入口起点（entry point）指示 webpack 应该使用 哪个模块，来作为构建其内部依赖图的开始

entry:string | array | object
	string: 是一个字符串形式的相对路径，找到某一个具体的文件
	array:['string','string'];
	object:{
	a: 'string',
	b:'string'
}
1、单个入口
	entry:string | array
2、对象形式，配置多个路径
	entry:{
	app:'./路径',
	other:'./路径',
	some:'./路径'
}
说明：entry 中的入口文件打包时会打包相关的有依赖关系的对应文件

2、基本配置-出口
output 属性 告诉 webpack 在哪里输出它所创建的 bundles

output:{
	// 存储路径：要求是绝对路径
	path:path.resolve(__dirname,'dist'),
	filename:'my-first-webpack.bundle.js'
	filename:'[name].js'
}
1、单出口
	{
		filename:'app.js'
	}
2、多出口
	[name]叫占位符，name 会自动找 entry 对象中的键名
	{
		filename:[name].js
	}

3、基本配置-loaders

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理

module:{
		rules:[
		// es6->es5
		{
			test:/\.js$/,
			use:{
				loader:'babel-loader'
				options:{
					presets:['@babel/preset-env']
				}
			},
			// include 包含作用，限定转换的范围
			include:path.resolve(__dirname,'src')
			 // exclude 是排除作用
              exclude:[path.resolve(__dirname, 'src')]
		}
	]
}

4、基本配置-pugins
webpack插件(自动打开浏览器、热更新等)
1.HtmlWebpackPlugin插件：自动创建html页面
安装：

npm install -- save-dev html-webpack-plugin

配置：

1.引入到webpack.config.js中
2.在plugins中配置
plugins:[
    new HtmlWebpackPlugin({
        template:'./index.html'
    })
]

2、2.ExtractTextWebpackPlugin插件：提取css到单独文件

安装：

npm install --save-dev extract-text-webpack-plugin@next

配置：

{
test: /\.css$/,
use:ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "css-loader"
})
}
plugins:[
new ExtractTextPlugin("styles.css")
]