webpack中使用babel 8.x

提醒一下：webpack 4.x 中 cli功能从webpack移到了webpack-cli，所以如果你要使用cli功能，除了安装 webpack 外，还需要安装 webpack-cli 。

webpack 4.x 使用extract-text-webpack-plugin插件

extract-text-webpack-plugin 提取css单独打包文件支持到webpack 3.x，如果在webpack 4.x中使用会报错，可以使用在安装的时候 extract-text-webpack-plugin@next 解决，也可以使用 mini-css-extract-plugin 插件。

• mini-css-extract-plugin的使用如下

const MiniCssExtractPlugin = require("mini-css-extract-plugin") ;

const config = module.exports = {
 　　plugins: [
    　　  new MiniCssExtractPlugin({
      　　  filename: "[name].[chunkhash:8].css",
     　　   chunkFilename: "[id].css"
   　　   })
　　  ],
  　　module: {
    　　rules: [
     　　 {
      　　  test: /\.css$/,
      　　  use: [
        　　  　　MiniCssExtractPlugin.loader,
        　　 　　 "css-loader"
       　　 ]
    　　  }
  　　  ]
 　　 }
}

module.exports = config

使用babel 8.x

注意点：安装babel的时候会默认帮你安装最新的版本，但这时候很多的babel插件会出现兼容的问题，不如不能使用babel-core，而使用@babel/core，等等。

以下的替换在使用 7.x (含7以上)

1. babel-core 替换为 @babel/core
   |- 因为babel-core支持到 babel 6.x， 如果使用 6.x 以上则需要修改，而且不可以两个都安装，可能会出现冲突的问题。
2. babel-preset-* 替换为 @babel/preset-*
   |- 比如使用 babel-preset-env 则需要换成 @babel/preset-env，在 .babelrc 配置文件中的 "presets": ["env"] 也需要修改为 "presets": ["@babel/preset-env"]。
3. babel-plugin-* 替换为 @babel/plugin-*
   |- 比如使用 babel-plugin-transform-runtime 则需要替换为 @babel/plugin-transform-runtime； .babelrc配置文件也要相应的修改。

简单案例

• webpack.config.js

var path = require('path');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ]
}

• package.json

"devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/plugin-transform-runtime": "^7.5.0",
    "@babel/preset-env": "^7.5.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5"
}

• .babelrc

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}