前言

　　搭建好前文的開發環境，已經可以進行開發。然而實際的項目中，不同環境有著不同的構建需求。這裏就將開發環境和生產環境的配置單獨提取出來，並做一些簡單的優化。

• 分離不同環境公有配置

　　不同環境雖然有不同的構建需求，但依然有相同的部分，這裏將共同部分提取出來，單獨配置，其他環境再合並共有配置即可。安裝webpack-merge(用於合並配置)、uglifyjs-webpack-plugin(js代碼壓縮，這裏單獨提取出來控制版本)和rimraf(跨平臺刪除工具)。

npm install webpack-merge uglifyjs-webpack-pulgin rimraf --save-dev

　　接下來配置共有配置webpack.config.js。

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

module.exports = {
  entry: [‘babel-polyfill‘, path.resolve(__dirname, ‘../src/index.js‘)],// 指定入口文件，程序從這裏開始編譯,__dirname當前目錄, ../表示上一級目錄, ./同級目錄
  output: {
    path: path.resolve(__dirname, ‘../dist‘), // 輸出的路徑
 

    filename: ‘app/[name]_[hash:8].js‘, // 打包後文件
  },
  module: {
    rules: [
      {
        enforce: ‘pre‘,
        test: /\.(js|jsx)$/,
        loader: ‘eslint-loader‘,
        exclude: /node_modules/,
      },
      {
        test: /\.(js|jsx)$/,
        loader: ‘babel-loader‘, // 加載器
        exclude: /node_modules/,
      },
      {
        test: 
 
/\.css$/,
        use: [
          {
            loader: ‘style-loader‘,
          },
          {
            loader: ‘css-loader‘,
          },
        ],
      },
      {
        test: /\.less$/,
        use: [{
          loader: ‘style-loader‘,
        }, {
          loader: ‘css-loader‘,
        }, {
          loader: ‘less-loader‘,
          options: {
            sourceMap: true,
          },
        }],
      },
    ],
  },
};

　　配置開發環境webpack.dev.config.js。

const path = require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const webpack = require(‘webpack‘);
const merge = require(‘webpack-merge‘);
const webpackConfig = require(‘./webpack.config‘);

process.env.NODE_ENV = ‘development‘;

module.exports = merge(webpackConfig, {
  devtool: ‘cheap-module-eval-source-map‘,
  entry: [
    ‘babel-polyfill‘,
    ‘react-hot-loader/patch‘,
    ‘webpack-dev-server/client?http://localhost:9090‘,
    ‘webpack/hot/only-dev-server‘,
    path.resolve(__dirname, ‘../src/index.js‘),
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      ‘process.env.NODE_ENV‘: JSON.stringify(process.env.NODE_ENV || ‘development‘),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, ‘../src/index.template.html‘),
      inject: true,
    }),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
});

　　由於生產環境不需要熱更新等，所以入口文件和以前的index.js有所不同。這裏在src目錄下新建index.prod.js，編輯如下。

/*eslint-disable*/
import React from ‘react‘;
import { render } from ‘react-dom‘;
import ‘babel-polyfill‘;
import App from ‘./App‘;

const renderDom = Component => {
    render(
          <Component />,
        document.getElementById(‘app‘)
    );
};
renderDom(App);

　　配置生產環境webpack.prod.config.js。

const path = require(‘path‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const webpack = require(‘webpack‘);
const merge = require(‘webpack-merge‘);
const UglifyJSPlugin = require(‘uglifyjs-webpack-plugin‘);
const webpackConfig = require(‘./webpack.config‘);

process.env.NODE_ENV = ‘production‘;

module.exports = merge(webpackConfig, {
  entry: [
    ‘babel-polyfill‘,
    path.resolve(__dirname, ‘../src/index.prod.js‘),
  ], 
  plugins: [
    new UglifyJSPlugin({
      uglifyOptions: {
        output: {
          comments: false,
          beautify: false,
        },
      },
    }),
    new webpack.DefinePlugin({
      ‘process.env.NODE_ENV‘: JSON.stringify(process.env.NODE_ENV || ‘production‘),
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, ‘../src/index.template.html‘),
      inject: true,
      minify: {
        html5: true,
        collapseWhitespace: true,
        removeComments: true,
        removeTagWhitespace: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
      },
    }),
  ],
});

　　配置package.json，新建三個執行腳本。

"scripts": {
    "dev": "node bin/dev-server",
    "build": "npm run clean && webpack --config webpack/webpack.prod.config.js",
    "devbuild": "npm run clean && webpack --config webpack/webpack.dev.config.js",
    "clean": "rimraf dist"
  }

# 啟動開發調試
npm run dev
# 開發環境構建
npm run devbuild
# 生產環境構建
npm run build

• 打包簡單優化

　　我們在構建的時候，往往希望自己的代碼和第三方庫分離開來，修改webpack.config.js。

......
entry: {
    app: [‘babel-polyfill‘, path.resolve(__dirname, ‘../src/index.js‘)],
    vendor: [‘react‘, ‘react-dom‘, ‘babel-polyfill‘],
  },
resolve: { // 指定第三方庫目錄，減少webpack尋找時間
    modules: [path.resolve(__dirname, ‘../node_modules‘)],
  },
......

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ‘vendor‘,
      minChunks: Infinity,
    }),
  ],
......

基於webpack的React項目搭建(三)