webpack包教不包會系列（三）

注：在github上看到一篇比較好的webpack入門教程，本人也是爲了加深印象以此記錄。奉上原文地址：https://github.com/kingvid-ch。

《使用webpack-dev-server實現熱更新》

目標

創建lesson02項目，內容和上節lesson01一致，當用瀏覽器訪問http://localhost:8080/index.html時，修改任一html、css、js、圖片文件，頁面都會自動刷新。

挑戰

在原項目的基礎上，將‘hello world’修改爲‘你好 世界’、字體顏色修改爲#ccc、並在2秒以後漸隱，瀏覽器頁面http://localhost:8080/index.html會自動刷新，能正確顯示頁面樣式且無報錯。

課程內容

webpack-dev-server很棒的一點是當修改頁面的時候不會整頁刷新，而是會熱更新，當頁面模塊體積較大時能夠省下不少時間。
首先安裝npm包

npm install webpack-dev-server -save-dev

編寫配置文件

copy如下代碼到webpack.config.js:

var path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ExtractTextPlugin = require("extract-text-webpack-plugin"),
webpack = require('webpack'); //這裏引入webpack是爲了使用webpack的熱更新功能以及其餘自帶插件，見 module.exports.plugins
module.exports = {
  entry: [
    // 給webpack-dev-server啓動一個本地服務，並鏈接到8080端口
    'webpack-dev-server/client?http://localhost:8080',

    // 給上面啓動的本地服務開啓自動刷新功能，'only-dev-server'的'only-'意思是隻有當模塊容許被熱更新以後纔有熱加載，不然就是整頁刷新
    'webpack/hot/only-dev-server',

    // webpack的入口文件，注意這個聲明必須寫在上面兩個後面，webpack-dev-server纔有效
    './webpack.entry.js'
  ],
  output: {
    filename: 'webpack.bundle.js',
    path: path.resolve(__dirname, './build'),
    publicPath: ''
  },
  context: __dirname,
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.(jpg|png)$/,
      use: ['url-loader?limit=10000&name=img/[name].[ext]']
    },
    {
      test: /\.html$/,
      use: ['html-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }), 
    new ExtractTextPlugin("style.css"),
    // 開啓webpack全局熱更新
    new webpack.HotModuleReplacementPlugin(),

    // 當接收到熱更新信號時，在瀏覽器console控制檯打印更多可讀性高的模塊名稱等信息
    new webpack.NamedModulesPlugin()
  ],

  // 定義webpack-dev-server
  devServer: {
    contentBase: path.resolve(__dirname, 'src'),
    // 靜態文件目錄位置，只有當你須要在webpack-dev-server本地服務器查看或引用靜態文件時用到。類型：boolean | string | array, 建議使用絕對路徑
    hot: true,
    // 模塊熱更新。依賴於HotModuleReplacementPlugin
    noInfo: false,
    // 在命令行窗口顯示打包信息
  }
};

看到上面修改得地方有：

1. require('webpack')
2. 修改entry屬性，插入兩個webpack-dev-server入口
3. 在plugin屬性增添了webpack自帶得HotModuleReplacementPlugin,NamedModulesPlugin兩個插件
4. 聲明devServer屬性

還須要在package.json文件中得script字段增長:

"scripts": {
    "start": "node_modules/.bin/webpack-dev-server",
    "build": "node_modules/.bin/webpack"
  },

最後，運行npm run start命令。在瀏覽器中打開http://localhost:8080/index.html,發現頁面顯示正常，而後修改style.css文件，發現控制檯中會有更新，可是頁面並無自動刷新。（這是由於extract-text-webpack-plugin不支持熱更新）爲了解決問題，咱們不使用extract-text-webpack-plugin,而後運行代碼，能夠看到瀏覽器頁面可以自動刷新了。

注意：webpack會對require的文件保持監聽，由於index.html並無被require，因此修改index.html得時候不會刷新頁面，此時在main.js文件中require一下index.html就會是實現熱更新。

devtool

當頁面某個部分樣式要調整時，因爲不知道對應樣式的具體位置，會增長修改的時間成本。webpack有個屬性能把樣式都索引到對應的css文件裏面，這個屬性就是 devtool，特別當頁面很複雜，多個模塊引入多個css文件時，devtool能大大提升我們的調試效率。

一、配置了devtool屬性
二、在module屬性 --> rules --> css-loader 添加了sourceMap參數

var path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
webpack = require('webpack'); //這裏引入webpack是爲了使用webpack的熱更新功能以及其餘自帶插件，見 module.exports.plugins
module.exports = {
  entry: [
    // 給webpack-dev-server啓動一個本地服務，並鏈接到8080端口
    'webpack-dev-server/client?http://localhost:8080',

    // 給上面啓動的本地服務開啓自動刷新功能，'only-dev-server'的'only-'意思是隻有當模塊容許被熱更新以後纔有熱加載，不然就是整頁刷新
    'webpack/hot/only-dev-server',

    // webpack的入口文件，注意這個聲明必須寫在上面兩個後面，webpack-dev-server纔有效
    './webpack.entry.js'
  ],
  output: {
    filename: 'webpack.bundle.js',
    path: path.resolve(__dirname, './build'),
    publicPath: ''
  },
  context: __dirname,
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader?sourceMap' // 這裏須要配置sourceMap參數
      ]
    },
    {
      test: /\.(jpg|png)$/,
      use: ['url-loader?limit=10000&name=img/[name].[ext]']
    },
    {
      test: /\.html$/,
      use: ['html-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),
    // 開啓webpack全局熱更新
    new webpack.HotModuleReplacementPlugin(),

    // 當接收到熱更新信號時，在瀏覽器console控制檯打印更多可讀性高的模塊名稱等信息
    new webpack.NamedModulesPlugin()
  ],

  // 定義webpack-dev-server
  devServer: {
    contentBase: path.resolve(__dirname, 'src'),
    // 靜態文件目錄位置，只有當你須要在webpack-dev-server本地服務器查看或引用靜態文件時用到。類型：boolean | string | array, 建議使用絕對路徑
    hot: true,
    // 模塊熱更新。依賴於HotModuleReplacementPlugin
    noInfo: false,
    // 在命令行窗口顯示打包信息
  },

  // 開啓devtool：開發階段特別有用，好比說用sass開發，在瀏覽器查看樣式時能夠方便知道該樣式是映射到sass具體的第幾行
  devtool: 'source-map'
};