webpack简介：
webpack是前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在做vue项目和react项目时都会可能用到，当前最火的前端构建工具之一，把前端各种资源编译打包，最后输出：js文件、css文件、png文件，可以减少文件资源的请求。
编译原理：利用各种处理文件的loader对各种文件进行编译，根据文件后缀处理后输出新的文件，如需了解更多建议阅读相关文档：https://webpack.docschina.org/
特别强调：webpack配置文件命名为：webpack.config.js
基本使用步骤如下：
1.在命令行键入以下命令回车创建项目文件夹，也可以通过鼠标右键创建项目文件夹（命名随意）：
mkdir webpackproject
2.在webpackproject文件夹中初始化一个package.json文件：
npm init -y
3.下载安装webpack及webpack-cli，命令行输入以下命令后回车:
npm install webpack webpack-cli --save-dev
4.更新目录结构：
webpackproject
|- package.json
|- index.html
|- /src //此目录存放开发环境代码
|- index.js//在此文件中键入测试代码：document.write('hello');
5.新建一个dist文件夹并将index.html文件复制到此文件夹中，如：
webpackproject
|- package.json
|- /dist //此目录用于存放生产环境代码，也就是要上线的代码
|- index.html
|- /src
|- index.js
6.在命令行执行以下命令回车，此时会发现dist文件夹中新增main.js文件，此文件就是src下面的index.js文件压缩版（以后在修改完src中的代码后再执行此命令，dist中的代码会自动更新）：
webpack 或 npx webpack --config webpack.config.js
此方式不是很方便，可以在package.json文件中配置一个快捷启动方式：在scripts键中添加：“build”: “webpack”，这里的build可以是任意没有意义的值，之后启动时在命令行输入：npm run build即可，build 需要保持一致。
7.使用webpack配置文件：有的项目中会用到webpack配置文件，这比直接在终端输入命令高效的多，基本配置如下：
// webpack文件主配置：
module.exports = {
mode: 'production', //启用webpack内部在相应环境下的优化，其值还有：development和none,实际是控制dist文件夹下文件是否压缩。
entry: { //---entry配置入口文件，指示 webpack 使用哪个模块来作为构建的基础；也可以是多入口来创建多页面应用程序，这里介绍单页面应用程序；
main: './src/main.js', //---main是默认入口，即veu项目中的main.js文件，main.js文件用来监听index.html文件中的盒子，并将app.vue文件的渲染结果返回给index.html文件中的这个盒子。
vendor: './src/vendor.js' //第三方库，会将main.js和vendor.js文件分开，这里可以不用配置此项。
}, //entry后面还可以直接跟字符串路径或数组路径，如：entry: './src/main.js'和entry: ['./src/file1.js', './src/file2.js']
output: { //---文件出口，将打包好的文件命名后输出
filename: './build.js', //---指定最终生成的js文件名
path: path.join(__dirname, 'dist') //----打包好的文件路径，最好是绝对路径；这里代表当前目录的上一级的dist目录；注意引入path模块
},
module: {
rules: [ //------webpack默认只能认识javascript和json文件，更多的loader可以用于配置处理更多的一类文件，此配置为loader配置，这里可以用更早的loaders:[]，功能和rules一样，不推荐；需要注意这些lodaer需要install且有的有依赖也要install。
{ //test是用于检测文件类型的；use是指定使用哪个loader，更早版本可以使用loader代替use但是不推荐。
test: /\.css$/, //-----处理css文件需要引入多个loader，如style-loader和css-loader中间可用！分开,test用于检测文件后缀
use: 'style-loader!css-loader' //-----这里是有顺序的，不能反过来使用；use还可以接数组，数组的每一项配置对应的loader如：
// use: [
// { loader: 'style-loader' },
// {
// loader: 'css-loader',
// options: {
// modules: true
// }
// }
// ]
},
{
test: /\.(jpg|svg|png|gif)$/, //----url-loader?limit=4096$name=[name].[ext]处理后缀为jpg、svg的图片文件，这里可以处理很多种格式的图片文件，只需要将文件后缀配置到这里即可。
use: 'url-loader?limit=4096$name=[name].[ext]', //[name].[ext]内置提供，[name]用来设置文件名，[ext]用于设置文件后缀名;limit用于设置当文件大于某字节时以base64格式输出，问号后面可以以options方式输出（废弃，不推荐），（新版中采用file-loader）如：
//options方式输出配置,已经废弃：
//options:{
// limit:4096,
// name:[name].[ext]
//}
},
{
test: /\.js$/, //----bable-loader处理后缀为js的文件
use: 'babel-loader',
exclude: /node-modules/, //---排除某文件下的文件不被处理，这里一般排除第三方资源，如node-modules文件夹中的文件
options: {//注意废弃问题
presets: ['es2015'], //关键字,这里配置的是解析es6语法
plugins: ['transform-runtime'], //函数
}
},
{
text: /\.vue$/, //解析vue文件配置：
use: 'vue-loader' //vue-template-compiler是代码上的依赖
},
{
test: /\.txt$/,
use: 'raw-loader'
}
]
},
plugins: [ //配置插件，执行范围更广的任务，如：打包优化，资源管理，注入环境变量。
new htmlWebpackPlugin({ //将src下的template属性描述的文件移动到当前output.path的配置目录下并生成html文件，htmlWebpackPlugin是一个模块，需要引入：html-webpack-plugin模块（应用程序生成一个 HTML 文件，并自动注入所有生成的 bundle）
template: './src/index.html'
})
]
};
//下面是新版webpack基本的webpack.ocnfig.js文件代码：
const htmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path')
module.exports = {
mode: 'production',
entry: {
main: './src/main.js',
vendor: './src/vendor.js'
},
output: {
filename: './build.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(jpg|svg|png|gif)$/,
use: ['file-loader']
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node-modules/
// options: {
// presets: ['es2015'],
// plugins: ['transform-runtime'],
// }
},
{
text: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.txt$/,
use: 'raw-loader'
},
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
}
]
},
plugins: [
new htmlWebpackPlugin({
template: './src/index.html'
})
]
};
如果配置完此文件，在命令行直接键入npm run build等启动命令，则会自动生成dist文件夹及里面文件，这样在做一个项目的时候就快捷多了，同时也会处理更多不同格式的文件（利用不同的loader）。
常见处理各种资源的loader总结：
在javascript模块中引入其他文件，需要安装对应的loader，之后在将这些loader配置到对应的位置，如：
| 资源 | loader及描述 |
|---|---|
| css文件 | style-loader 和 css-loader；用于解析通过import导入js文件的css文件等 |
| images图像 | file-loader;解析background和icon等图像文件 |
| fonts字体 | file-loader 和 url-loader 可以接收并加载任何文件，这里采用其中一种就可以解析fonts文件 |
| 数据文件 | csv-loader和xml-loader解析json、xml等数据 |
| vue文件 | vue-loader,处理vue组件 |
html-webpack-plugin：
用于生成一个HTML5文件并将这个文件打包到dist目录下的插件，使用时只需要将其添加到webpack配置文件中（使用过此插件后dist文件夹中生成的index.html文件会引用dist文件下的main.js文件，此main.js文件会包含css等），如：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//需要安装
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
title: 'index'
})
],
};
clean-webpack-plugin：
用于清除dist目录中的旧文件，在每次构建时都会清除之前构建的dist目录下的文件，这样dist文件夹就不会显得很杂乱了，如：
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin'); //注意需要安装
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
source map：
在开发环节中，webpack会将不同的模块最终打包到一起，此时如果某个模块有错误，这个错误只会显示在打包后的总文件中，此时想要修改未打包前的原文件，那么就很难找到错误所在了。当然webpack提供了source map可以将编译好的代码映射到源码中，这样就可以找到错误所在了，具体如：
module.exports = {
mode: 'development', //1.将mode设置为开发环境
entry: {
app: './src/index.js'
},
devtool: 'inline-source-map', //2.devtool属性设置为inline-source-map
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
}
};
//3.此时如果某个文件有错误，那么在控制台就会清楚的显示到某文件某行出现错误。
自动编译：
webpack提供了几种自动编译代码的配置，当代码被修改后会自动编译，此配置有：webpack watch mode(webpack 观察模式)、webpack-dev-server、webpack-dev-middleware，常用webpack-dev-server,它们具体使用方法如下：
webpack watch mode：（缺点：浏览器不能被自动刷新）
