JavaScript -- 详解Webpack + ES6 搭建环境和语法使用

W3Cschool: https://www.w3cschool.cn/escript6/escript6-m42v37eq.html.

1. Upgrade

2. Create Environment

2.1 Nodejs install

Nodejs install: https://blog.csdn.net/weixin_43916074/article/details/122999390.

2.2 Webpack

• 新建一个文件夹(项目名称es6), 进入该项目，npm init, 然后一路回车即可。(会生成一个package.json)
• 在根目录下创建src目录，并在src目录下创建main.js
• 在根目录下创建public目录，并在public目录下创建index.html
• 在项目的根目录下执行 npm install webpack webpack-cli --save-dev
• npm install webpack-dev-server html-webpack-plugin --save-devwebpack-dev-server是启动一个本地的服务，html-webpack-plugin是一个插件，用来使用html的模板
• 在根目录下创建webpack.config.js文件
• 继续安装npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev
  

2.3 Config

// 1.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: 9002,
        // 自动启动
        open: true,
        // 浏览器中设置日志级别
        client: {
            logging: 'none'
        }
    }
}

// 2.package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server"
  },

// 3.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 两个版本
            }
        ]
    ]
}

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

2.4 Run

• npm run serve
  
• http://localhost:9002
  现在就可以在src下的main.js中写es6代码啦

3. Grammar

4. Awakening

         在一秒钟内看到本质的人和花半辈子也看不清一件事本质的人，自然是不一样的命运。