使用webpack搭建项目开发环境_配置解析装饰器 decorator 的 babel-loader

前言

之前写过关于 webpack 的详细介绍及各个属性的含义，不明白什么意思的可以查看之前的文章https://blog.csdn.net/Charissa2017/article/details/105055945
这篇文章主要是对搭建 webpack 环境做个简单的总结，顺便再介绍一下关于 babel-loader 的配置。

搭建步骤：

1. npm init -y，生成 package.json 配置文件；
2. yarn add webpack webpack-cli webpack-dev-server -D，安装webpack和webpack-dev-server；
3. html-webpack-plugin，安装 htmlt 模板插件；
4. yarn add babel-loader @babel/core @babel/preset-env -D，安装babel-loader；
5. 在项目根目录下新建 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'
    })]  
}