webpack1和webpack2版本的區別

webpack1已結再也不維護了，官方在主推webpack2，原先使用webpack1的用戶，想要使用v2，只須要作幾個配置小改動便可。

咱們只關注經常使用的配置選項，不經常使用的不作解釋。

一、resolve配置

之前你可能這麼寫

resolve: {
    extensions: ['', '.jsx', '.js', '.json'],
    modulesDirectories: ['node_modules', 'src'],
    alias: {
        actions: __dirname + `/src/actions`,
        components: __dirname + `/src/components`,
        containers: __dirname + `/src/containers`,
        reducers: __dirname + `/src/reducers`,
        store: __dirname + `/src/store`
    }
}

如今你該這麼寫：取消了空字符串

resolve: {
    extensions: ['.js', '.jsx', '.less', '.scss', '.css'],
    modules: [
      path.resolve(__dirname, 'node_modules'),
      path.join(__dirname, './src')
    ]
  }

二、module配置

之前你可能這麼寫：module: {

loaders: [{
    test: /\.(js|jsx)$/,
    loaders: ['react-hot', 'babel-loader'],
    exclude: /node_modules/
}, {
    test:   /\.(less|css)$/,
    loader: "style-loader!css-loader!less!postcss-loader"
}, {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file?name=[md5:hash:base64:10].[ext]'
}, {
    test: /\.json$/,
    loader: 'json'
}, {
    test: /\.md$/,
    loader: 'file?name=[name].[ext]'
}]

}

如今你該這麼寫：

a、外層loaders改成rules

b、內層loader改成use

c、全部插件必須加上-loader，再也不容許縮寫，因此react-hot不須要再配置。

d、再也不支持使用！鏈接插件，請使用數組形式。

e、json-loader已經被移除，不須要手動添加，webpack會幫你處理好這些事情。

module: {
      rules: [{
          test: /\.(js|jsx)$/,
          use: ['babel-loader'],
          exclude: /node_modules/,
          include: path.join(__dirname, 'src')
      }, {
          test: /\.(less|css)$/,
          use: ["style-loader", "css-loader", "less-loader", "postcss-loader"]
      }, {
          test: /\.(png|jpg|gif|md)$/,
          use: ['file-loader?limit=10000&name=[md5:hash:base64:10].[ext]']
      }, {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: ['url-loader?limit=10000&mimetype=image/svg+xml']
      }],
  }
};

三、plugins配置

之前你可能這麼寫：

new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin()

如今你該這麼寫：

a、移除了OccurenceOrderPlugin 和 NoErrorsPlugin

b、更多plugins配置請參考 https://webpack.js.org

new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin()

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

以上幾個經常使用配置變化的比較明顯，沒有修改的配置會報錯致使webpack沒法使用，請注意遵照webpack2規則。

最後貼上一份webpack.config.js基礎配置，查看該配置完整項目請點擊：react-webpack2

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var precss = require('precss');

//判斷當前運行環境是開發模式仍是生產模式
const nodeEnv = process.env.NODE_ENV || 'development';
const isPro = nodeEnv === 'production';

console.log("當前運行環境：", isPro)

var plugins = []
if (isPro) {
  plugins.push(
      new webpack.optimize.UglifyJsPlugin({
          compress: {
              warnings: false
          }
      }),
      new webpack.DefinePlugin({
          'process.env':{
              'NODE_ENV': JSON.stringify(nodeEnv)
          }
      })
  )
} else {
  plugins.push(
      new webpack.DefinePlugin({
          'process.env':{
              'NODE_ENV': JSON.stringify(nodeEnv)
          },
          BASE_URL: JSON.stringify('http://localhost:9009'),
      }),
      // new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin()
      // new webpack.NoErrorsPlugin()
  )
}

module.exports = {
  devtool: false,
  entry: {
    app: [
      'webpack-hot-middleware/client?path=http://localhost:3011/__webpack_hmr&reload=true&noInfo=false&quiet=false',
      'babel-polyfill',
      './src/index'
    ]
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'build'),
    publicPath: 'http://localhost:3011/build/',
    chunkFilename: '[name].js'
  },
  // BASE_URL是全局的api接口訪問地址
  plugins,
  // alias是配置全局的路徑入口名稱，只要涉及到下面配置的文件路徑，能夠直接用定義的單個字母表示整個路徑
  resolve: {
    extensions: ['.js', '.jsx', '.less', '.scss', '.css'],
    modules: [
      path.resolve(__dirname, 'node_modules'),
      path.join(__dirname, './src')
    ]
  },

  module: {
      rules: [{
          test: /\.(js|jsx)$/,
          use: ['babel-loader'],
          exclude: /node_modules/,
          include: path.join(__dirname, 'src')
      }, {
          test: /\.(less|css)$/,
          use: ["style-loader", "css-loader", "less-loader", "postcss-loader"]
      }, {
          test: /\.(png|jpg|gif|md)$/,
          use: ['file-loader?limit=10000&name=[md5:hash:base64:10].[ext]']
      }, {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          use: ['url-loader?limit=10000&mimetype=image/svg+xml']
      }],
  }
};