webpack4采坑一：编译es6语法的js文件

港控/mmm° 2022-04-04 13:48 197阅读 0赞

使用webpack4编译es6语法的JS文件，需要使用babel，原理不多说了，直接去度娘。

以下直接贴出代码，记录下采坑过程，以便以后不多走歪路

1、package.json配置

采坑点：babel-loader一定不要用8.0以上的版本，因为8.0版本都不兼容babel-core

{
      "name": "webpack_test",
      "version": "1.0.0",
      "main": "a.js",
      "scripts": {
        "build": "webpack --progress --watch",
        "server": "webpack-dev-server --content-base ./"
      },
      "author": "",
      "license": "ISC",
      "keywords": [],
      "description": "",
      "dependencies": {
        "lodash": "^4.17.11",
        "moment": "^2.22.2"
      },
      "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "webpack": "^4.27.1",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.10"
      }
    }

2、webpack.config.js配置

const path = require('path');
    const webpack = require('webpack');
    
    module.exports = {
        devtool: 'source-map',
        entry: {
           'a': [path.resolve(__dirname, 'assets/source/js/a.js')]
        },
        output: {
            path: path.resolve(__dirname, 'assets/dist/js'),
            filename: '[name]-buddle.js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: { presets: ['es2015'] }
                        }
                    ]
                }
            ]
        },
    
        plugins:[
            
          ]
    }

3、cnpm run build -----执行webpack打包，将es6打包成es5

4、cnpm run server -----启动服务