1.2升级webapck到webpack3

这里的难点主要是配置文件

webpack1.x配置

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/js/index.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015'],
          compact: false
        }
      }
    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

webpack3.x配置

/**
 * Webpack 3.x 配置文件
 */

const path = require('path');
const webpack = require('webpack');

// 判断环境
const debug = process.env.NODE_ENV !== "production";

// 引入插件
const plugins = [
  new webpack.optimize.ModuleConcatenationPlugin()
]

module.exports = {
  context: path.resolve(__dirname, './src'),
  devtool: debug ? "inline-sourcemap" : null,
  entry: {
    index:path.resolve(__dirname,"./src/js/index.js")
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  },
  devServer: {
    contentBase: path.resolve(__dirname, './'),
    port: 9002,
    host: '127.0.0.1'
  },
  module: {
    rules: [{
      test: /\.js[x]?$/,
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react']
        }
      }],
      exclude: /node_modules/
    }]
  },
  plugins: plugins
}

记得 npm i 刷新 NodeModule
npm run hot
localhost:9002

ae6623 / ReactL

1.2升级webapck到webpack3 #3

1.2升级webapck到webpack3