配置练习ES6的项目环境【Webpack】

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

1.目录构成

首先,我们新建除node_modules和package.json外的文件(.prettierrc这个是我的代码格式,可以不用配),然后npm init生成package.json文件。
配置练习ES6的项目环境【Webpack】

// .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',
    // 入口
    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成功启动项目
配置练习ES6的项目环境【Webpack】

4.测试

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

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

配置练习ES6的项目环境【Webpack】

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

上一篇:副词


下一篇:ES6查漏补缺【字符串的扩展】