配置ES6的项目环境【Webpack】

前言：最近想要系统的复习一下ES6，故搭建一个环境。

1.目录构成

首先，我们新建除node_modules和package.json外的文件（.prettierrc这个是我的代码格式，可以不用配），然后npm init生成package.json文件。

// .babelrc文件内容
{
    "presets": [
        [
            "@babel/preset-env",{
            	// 将 useBuiltIns 改为 "usage"，babel 就可以按需加载 polyfill
            	// 并且不需要手动引入 @babel/polyfill
                "useBuiltIns":"usage",
                "corejs":3
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs":3  // 指定 runtime-corejs 的版本，目前有 2 3 两个版本
            }
        ]
    ]
}

---

// .browserslistrc文件内容
last 2 versions // 最后两个版本
> 1% // 使用权重大于1%
not dead // 没被废弃

---

// webpack.config.js文件内容
// 所有输出文件的目标路径
const path = require('path')

// 可以帮助我们在打包时生成一个html文件，并且自动引入所需文件，--save-dev开发环境安装即可
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'production',
    // 定位打印代码位置
    devtool: 'nosources-source-map',
    // 入口
    entry: {
        app: './src/main.js'
    },
    // 出口
    output: {
        // __dirname当前文件所在目录（顶级目录）
        // resolve是路径相对转为绝对，也可以使用join
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },

    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            // 配置模版属性,复制一份到打包后的dist文件里面
            template: './public/index.html'
        })
    ],

    // module来配置解析文件
    module: {
        rules: [
            {
                // 文件类型
                test: /\.m?js$/,
                // 排除文件
                exclude: /node_modules/,
                // 使用loader
                use: 'babel-loader'
            }
        ]
    },

    // 配置本地网络
    devServer: {
        // 端口号
        // port: 8000,
        // 自动启动
        open: true,
        // 浏览器中设置日志级别
        client: {
            logging: 'none'
        }
    }
}

---

2.安装对应的loader和plugin

npm install 
webapck webpack-cli 
webpack-dev-server
html-webpack-plugin
babel-loader
@babel/core 
@babel/preset-env
@babel/plugin-transform-runtime --save-dev

---

npm install 
@babel/polyfill 
@babel/runtiome core-js 
@babel/runtime-corejs3 --save

---

3.配置启动

// package.json文件
"scripts": {
    "serve": "webpack-dev-server",
    "build": "webpack"
},

控制台输入npm run serve成功启动项目

4.测试

在main.js中写一点es6代码，我们试试看

// main.js文件
const NUM = [1, 2, 3, 4]
const ARR = NUM.map((item) => {
    return item
})
console.log(ARR, '11')

下一篇文章会汇总练习下es6多数特性！！
水平有限，还不能写到尽善尽美，希望大家多多交流，跟春野一同进步！！！