github
以往文章：
重溫webpack：骨架搭建

準備

dev-server需要解決我們的哪些問題？

1. 開發環境熱模塊替換
2. 自動刷新
3. debug追蹤到原文件。source-map的解釋

開啟dev-server要區分好生產環境與開發環境，先前，我們都是直接生成生產環境，現在我們需要使用webpack-merge進行區分。

• npm i dev-server -D
• 修改package.json

"script": {
  "build": "./build/build.js",
  "dev": "dev-server --config ./build/dev.js"
}

• 調整基礎結構，拆分生產環境與開發環境。生產環境構建

// 在之前的基礎上，我們在開發環境中并不需要單獨打包css
/**** base config ****/
const utils = require('./utils')
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports={
  entry:utils.entries(),
  output:{
    filename:'[name].js',
    path:path.resolve(__dirname,'../dist')
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: 'html-loader'
      }
    ]
  },
  plugins:[
    new CleanWebpackPlugin(),
  ].concat(utils.htmlPlugins())
}
/**** 生產環境 build.js ****/
const baseConfig = require('./webpack.config')
const webpack = require('webpack')
const merge = require('webpack-merge')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const config = merge(baseConfig, {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextWebpackPlugin.extract({
          fallback:'style-loader',
          use:'css-loader'
        })
      }
    ],
  },
  plugins: [
    new ExtractTextWebpackPlugin('css/[name].css')
  ]
})
webpack(config, function(err){
  if (err) throw err
  console.log('product......')
})

• 配置dev-server

/**** dev.js ****/
const baseConfig = require('./webpack.config')
const merge = require('webpack-merge')
const webpack = require('webpack')
const config = merge(baseConfig, {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  // https://segmentfault.com/a/1190000004280859
  // devtool: 'inline-source-map',
  devServer: {
    contentBase: '/',
    // 監聽的端口
    port: 8080,
    // 使用熱模塊替換
    hot: true,
    // 自動打開頁面
    open: true,
    // 顯示打包進度
    progress: true,
    // 報錯在頁面打出
    overlay: { 
      warnings: false,
      errors: true
    },
    // watchOptions: {
    //   // 文件更改后延遲刷新,毫秒為單位進行輪詢。
    //   poll: 5000
    //   // 
    //   aggregateTimeout: 1000
    // }
  },
  plugins: [
  // 加載熱模塊替換包
    new webpack.HotModuleReplacementPlugin()
  ]
})
module.exports = config

//  package.json
-  "dev": "dev-server --config ./build/dev.js"
+  "dev": "dev-server --config ./build/dev.js --inline" // 實時更新
// 很疑惑的是inline配置在devServer中并不啟作用，放在command反而是可行的

公共模塊的提取

代碼分離是 webpack 中最引人注目的特性之一。此特性能夠把代碼分離到不同的 bundle 中，然后可以按需加載或并行加載這些文件。代碼分離可以用于獲取更小的 bundle，以及控制資源加載優先級，如果使用合理，會極大影響加載時間。
代碼分離

• CommonsChunkPlugin配置

/**** build.js ****/
// 相當于為每個入口文件提取公共模塊
+ const utils = require('./utils')
+ new webpack.optimize.CommonsChunkPlugin({
+     name: 'common',
+     filename: 'common/[name].bundle.js',
+     minChunks: utils.htmlPlugins().length
+ }),
/**** utils.js ****/
let conf = {
    filename:filename+'.html',
    template:path.resolve(PAGE_PATH,filename+'/'+filename+'.html'),
-   chunks:[filename]
+   chunks:[filename, 'common']
    inject:true,
 }

最后， 更多細節可以從我的github上clone下來試試~~

github