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

2022-01-01 15:33:17 阅读：150 来源： 互联网

标签：ES6 const 文件 babel 练习 webpack js Webpack plugin

前言：最近想要系统的复习一下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',
    // 入口
    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多数特性！！
水平有限，还不能写到尽善尽美，希望大家多多交流，跟春野一同进步！！！

标签：ES6,const,文件,babel,练习,webpack,js,Webpack,plugin
来源： https://blog.csdn.net/jinchunye/article/details/122266975

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

1.目录构成

2.安装对应的loader和plugin

3.配置启动

4.测试