前言
之前写过关于 webpack 的详细介绍及各个属性的含义，不明白什么意思的可以查看之前的文章https://blog.csdn.net/Charissa2017/article/details/105055945
这篇文章主要是对搭建 webpack 环境做个简单的总结，顺便再介绍一下关于 babel-loader 的配置。
搭建步骤：
npm init -y，生成 package.json 配置文件；yarn add webpack webpack-cli webpack-dev-server -D，安装webpack和webpack-dev-server；html-webpack-plugin，安装 htmlt 模板插件；yarn add babel-loader @babel/core @babel/preset-env -D，安装babel-loader；- 在项目根目录下新建
webpack.confg.js配置文件；
1. 生成 package.json 配置文件
在项目根目录下打开终端，执行 npm init -y，-y 表示一路确认。执行完成后，会看到要根目录下生成了 package.json 配置文件
2. 安装webpack
终端里执行 yarn add webpack webpack-cli webpack-dev-server -D 安装webpack、webpack-cli 和 webpack-dev-server 。
如果使用的是webpack 4+ 版本，是需要安装 CLI 的。webpack-cli 可以允许直接在控制台操作webpack命令。
使用 webpack-dev-server，可以在开发模式下，新建一个开发服务器，并且当代码更新的时候自动刷新浏览器。
安装 webpack-dev-server 后，在 package.json 文件中添加脚本，执行 script 脚本的话会优先在 node_modules 里面找；如果是直接在终端执行命令的话，是不会在 node_modules 中找的。
{
"scripts": {
//指定配置文件为webpack.config.js
"dev": "webpack-dev-server --config webpack.config.js"
},
}
3. 安装 html-webpack-plugin
终端里执行yarn add html-webpack-plugin -D，这个插件的作用是将 html 模板文件和 js 文件整合到一起。如果是多页面应该，则每个页面都需要有对应的new HtmlWebpackPlugin()。
//html-webpack-plugin 将html模板文件和js文件整合到一起
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
//模板文件路径
template: "./src/views/index.html",
//自动存储到output 配置的目录
filename: 'index.html',
chunks: ['main']
})
]
};
webpack在编译的时候，会把所有的 js 合并输出在一个js文件，而设置 chunks 属性的目的，就是让当前页面模板只加载当前页面所需要的模块。上面的写法表示，在编译./src/views/index.html 时，只需要加载main.js文件。
4. 安装 babel-loader
如果要使用 babel-loader 对代码进行翻译，需要先安装 Babel 几个核心的包，如果你还不太懂 Babel 是做什么的，点击这里查看https://blog.csdn.net/Charissa2017/article/details/104872902
终端里执行yarn add babel-loader @babel/core @babel/preset-env -D 安装 babel-loader 的核心包和预设。
终端里执行 yarn add @babel/plugin-transform-runtime -D，用来避免多次编译出helper函数。
4.1 装饰器语法转换
装饰器是ES6的语法，如果要在项目中使用装饰器，需要使用 @babel/plugin-proposal-decorators 将它转换成 ES5 的语法。
终端里执行yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D，安装用来解析装饰器的 loader。
module.exports = {
module:{
rules:[ //rules是个数组，可以配置多个loader
{
test:/\.js$/, //要匹配哪些文件的规则
exclude:/node_modules/, //要排除哪些目录
use: { //要使用的loader
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'], //presets 是一个插件的集合，在编译的时候，会根据需要加载插件
plugins: [ //执行的顺序是从右向左，所以基础插件要放在最后
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }],
["@babel/plugin-transform-runtime"]
]
}
}
}
]
}
};
5. webpack配置文件
在项目根目录下新建 webpack.config.js 配置文件，内容如下。
const path = require('path')
const htmlwebpackplugin = require('html-webpack-plugin')
module.exports={
mode:'development', //开发环境
devtool:'inline-source-map', //浏览器开启调试模式
entry:'./src/index.js', //配置单页面
entry:{ //配置多页面,跟配置单页面二选一
index:'./src/index.js',
detail:'./src/detail.js',
},
output:{
path:path.resolve(__dirname,'./dist'), //必须是绝对路径
filename:'[name]-[hash].js', //输出的文件名称,对应entry里的名称，也可以直接指定
},
devServer:{
contentBase: path.join(__dirname, 'dist'), //设置Http服务器的文件根目录
compress: true, //启用gzip压缩
port: 9000, //端口
open:true //是否自动打开浏览器
},
module:{ //loader配置
rules:[ //rules是个数组，可以配置多个loader
{
test:/\.m?js$/, //要匹配哪些文件的规则，正则写法
exclude:/node_modules/, //要排除哪些目录，正则写法
use:{ //要使用的loader
loader:'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [ //执行的顺序是从右向左，所以基础插件要放在最后
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }],
["@babel/plugin-transform-runtime"]
]
}
}
}
],[
//如果还要别的loader，继续在这里添加就行
]
},
plugins:[new htmlwebpackplugin({
filename:'index.html',
template:'./index.html'
})]
}