什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
为什么要使用WebPack
1、模块化，让我们可以把复杂的程序细化为小的文件;
2、类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
3、Scss，less等CSS预处理器
4、...
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
那么，本文就给出webpack基本的一些配置（如何安装webpack及其使用前的准备工作网上已经给的够多，这里不做描述）。
webpack.config.js配置如下：
const path = require('path')
const config = require('./config')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CleanWebpackPlugin = require('clean-webpack-plugin')
// const OpenBrowserPlugin = require('open-browser-webpack4-plugin'); //没什么卵用
const webpack = require('webpack')
function resolve (dir) {
return path.join(__dirname, '..', dir) //用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是/，Windows系统是\。
}
module.exports = {
// devtool: 'config.dev.devtool', //每个module会通过eval()来执行，转化为字符串，并且生成一个DataUrl形式的SourceMap（#sourceMappingURL(base64)和#sourceURL）。
mode: 'development', //设置此项是为了在运行npm start时告知webpack当前是处于开发环境下就不会有警告提示。因为开发环境下，生成的文件有点过大所以会有警告提示
//入口文件的配置项 __dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录
entry: __dirname + '/src/main.js', //配置入口文件的地址，可以是单一入口，也可以是多入口。
//出口文件的配置项
output:{
path: __dirname + '/dist',//打包后输出目录
// filename:'js/bundle-[chunkhash].js', //打包后输出的文件 热更新(HMR)不能和[chunkhash]同时使用。
filename: 'js/bundle-[hash].js'
}, //配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
//模块：例如解读CSS,图片如何转换，压缩
module: { //配置模块，主要是解析CSS和图片转换压缩等功能。
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: /node_modules/,
include: resolve('src'),
options: {
compilerOptions: { //编译选项
preserveWhitespace: false //去掉元素之间的空格
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src')]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'], //这种写法也是可以的 webpack的执行顺序是从右往左，即先执行postcss-loader再执行css-loader，最后执行style-loader。
// loader: 'style-loader!css-loader!postcss-loader' //这种写法也是可以的
/* 用以下这种写法来解决自动添加css前缀的问题也是可以的，
* 用了这种写法，上边的use: ['style-loader', 'css-loader', 'postcss-loader']或loader: 'style-loader!css-loader!postcss-loader'就可以注释掉了，
* 这种写法不需要在根目录再创建一个postcss.config.js配置文件，
* 但这种写法由于不需要在根目录再创建一个postcss.config.js配置文件，
* 所以会导致在编译less或sass等文件时会报“No PostCSS Config found in”的错误，
* 就是因为少了一个postcss.config.js配置文件
*/
// use: [
// 'style-loader',
// {
// loader: 'css-loader',
// options: {importLoaders: 1}
// },
// {
// loader: 'postcss-loader',
// options: {
// ident: 'postcss',
// plugins: [
// require('autoprefixer')({browsers: ['last 5 versions']}), //处理CSS前缀问题，自动添加前缀
// ]
// }
// }
// ],
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] //需要安装less
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] //需要安装node-sass，不需要安装sass
},
{
test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
use: 'file-loader?name=assets/[name]-[hash:7].[ext]'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/i,
loader: 'url-loader',
/* 设置了limit后，文件体积大于limit的，
* 将直接被放在dist目录下的assets文件中（此时文件没有被压缩），
* 并加上hash值显示在页面中，如果小于limit的，
* 则直接被打包成base64形式的文件。
*/
options:{
limit: 10000,
name: 'assets/[name]-[hash:7].[ext]'
}
},
]
},
resolve: {
extensions: ['.js', '.vue'],
modules: [
'./',
path.resolve(__dirname, 'node_modules'),
]
},
//插件，用于生产模版和各项功能
plugins:[ //配置插件，根据你的需要配置不同功能的插件。
//添加了hash之后，会导致改变文件内容后重新打包时，文件名不同而内容越来越多，因此就要用到这个很好用的插件clean-webpack-plugin。
//clean-webpack-plugin每次都会清理dist文件夹的内容。通常，在每次构建前清理/dist文件夹，是比较推荐的做法，因此只会生成用到的文件。
new CleanWebpackPlugin(['dist']), //打包时有用 当运行npm start处在开发环境时，dist文件就会被删掉。
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
//filename: "index-[hash].html",
//filename: "default.html", //filename可以改变生成的html文件的名称，最好跟template是一样的名称，不然生成一个新的html文件，就要挨个去修改超链接地址了，也可以不设置filename。
template: "index.html",
//inject: true, //设置插件放置的位置，不设置的话默认为true就放置在