WEBPACK4.X 版本 BABEL7.X 版本配置react

package.json

---

{
  "name": "webpack-skeleton",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --config webpack.config.build.js --progress",
    "watch": "webpack --watch --mode=production",
    "start": "webpack-dev-server --open --mode=production",
    "devserver": "node dev-server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
    "antd": "^3.10.8",
    "jquery": "^3.3.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  }
}

.babelrc 

---

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

 

webpack.config.js

---

const path = require('path');
//處理模板html自動引入JS
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除文件夾
const CleanWebpackPlugin = require('clean-webpack-plugin');
//js壓縮插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
module.exports = {
  mode: "development",
  entry: {
    entryA: path.resolve(__dirname, "src/a/a.js")
  },
  output: {
    filename: './js/[name].[hash:8].bundle.js',//名字已入口entry 名字命名
    path: path.resolve(__dirname, 'dist')//輸出文件的路徑
  },
  module: {
    rules: [
      { test:/\.(js|jsx)?$/, exclude: /node_modules/, loader: "babel-loader" },
      {
        test: /\.css$/,
        use: [
           'style-loader',
            'css-loader'
              ]
          }
    ]
  },
  
  //輸出源碼
  devtool: 'source-map',

  /**
   * 一些優化配置
   */
  optimization: {
    //壓縮js
    // minimizer: [
    //   new UglifyJsPlugin()
    // ],
    //抽離公用的js部分 , 配置自動提取node_modules裏用到的模塊如jquery
    splitChunks: {
      cacheGroups: {
        vendor: {
          // test: /\.js$/,
          test: /[\\/]node_modules[\\/]/,
          chunks: "initial", //表示顯示塊的範圍，有三個可選值：initial(初始塊)、async(按需加載塊)、all(全部塊)，默認爲all;
          name: "vendor", //拆分出來塊的名字(Chunk Names)，默認由塊名和hash值自動生成；
          enforce: true,
        },
       
      }
    }
  },
  resolve: {
    extensions: ['.js','.jsx']
  },
  plugins: [
    //清除文件
    new CleanWebpackPlugin(['dist']),
    //設置默認環境變量
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
      LOCAL_ROOT: JSON.stringify("http://ziksang.com")
    }),
    /**
     * chunks 代碼塊,vendor 爲固定靜態資源splitChunks配置,各個模板的入口 對應entry入口模塊
     */
    new HtmlWebpackPlugin({
      filename: 'entryA.html',
      template: 'src/a/a.ejs',
      inject: true
    }),
    //配合devServer 實現熱更新
    new webpack.HotModuleReplacementPlugin()
  ]
};

dev-server 

---

const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');

const config = require('./webpack.config.js');
const options = {
  contentBase: './dist',//配置根路徑
  hot: true,//是否開啓熱更新
  host: 'localhost'
};

webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
//啓動端口
server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});