学习webpack4 - ES6语法转化

╰+哭是因爲堅強的太久メ 2022-03-07 13:48 228阅读 0赞

[学习webpack4 - 基础配置][webpack4 -]  
[学习webpack4 - HTML处理][webpack4 - HTML]  
[学习webpack4 - 样式处理][webpack4 - 1]  
[学习webpack4 - ES6语法转化][webpack4 - ES6]  
[学习webpack4 - 第三方库的使用][webpack4 - 2]  
[学习webpack4 - 抽离公共代码][webpack4 - 3]

...持续中

=======================================================

# ES6语法转化 #

*注意：开始之前以下内容之前，需要配置一些webpack的基础配置，传送门：[学习webpack4.x - 基础配置][webpack4 -]*

当前目录结构为：

![clipboard.png][]

*  index.js 文件内容：

require('./index.css');
    require('./index.scss');

*  webpack.config.js文件内容：

*  package.json文件内容：

{
      "name": "webpack",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "scripts": {
        "dev": "webpack --mode development && webpack-dev-server",
        "build": "webpack --mode production"
      },
      "devDependencies": {
        "autoprefixer": "^9.4.7",
        "css-loader": "^2.1.0",
        "html-webpack-plugin": "^3.2.0",
        "less": "^3.9.0",
        "less-loader": "^4.1.0",
        "mini-css-extract-plugin": "^0.5.0",
        "node-sass": "^4.11.0",
        "optimize-css-assets-webpack-plugin": "^5.0.1",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.1",
        "uglifyjs-webpack-plugin": "^2.1.1",
        "webpack": "^4.29.4",
        "webpack-cli": "^3.2.3",
        "webpack-dev-server": "^3.1.14",
        "webpack-html-plugin": "^0.1.1"
      }
    }

## 将ES6转化为ES5 ##

step1: 打开src/index.js，输入：

const fn = () => {
      console.log('丸子');
    }
    
    fn ();

step2: 配置webpack.config.js文件：

将ES6转成ES5，需要babel-loader，配置规则为：

module.exports = {
      //...
      module: {
        //...
        {
          test: /\.js$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'] // 根据目标浏览器自动转换为相应es5代码
            }
          }
        }
      }
    };

step3: 安装插件：

yarn add babel-loader @babel/core @babel/preset-env -D

尝试运行： npm run dev, 成功！如下图：

![clipboard.png][clipboard.png 1]

[webpack4 -]: https://segmentfault.com/a/1190000018191312
[webpack4 - HTML]: https://segmentfault.com/a/1190000018193226
[webpack4 - 1]: https://segmentfault.com/a/1190000018200257
[webpack4 - ES6]: https://segmentfault.com/a/1190000018204136
[webpack4 - 2]: https://segmentfault.com/a/1190000018205337
[webpack4 - 3]: https://segmentfault.com/a/1190000018218985
[clipboard.png]: /images/20220307/81bae5e4ab8645d880966387fa0a3c5d.png
[clipboard.png 1]: /images/20220307/7210fdb65fbd4c369da58a9de9f0b93a.png