webpack小白入門之文件監聽，熱更新，文件指紋，代碼壓縮【1-4】

webpack中的文件監聽

文件監聽是在發現源碼發生變化的時候，自動從新構建出新的輸出文件。

webpack開啓監聽模式的兩種模式：

• 啓動 webpack 命令時候，帶上 --watch 參數

package.json中配置以下:

"scripts": {
    "build": "webpack --watch"
},
複製代碼

上面方式有個缺陷，就是每次webpack更新代碼，都要手動刷新瀏覽器！

• 在配置 webpack.config.js 中設置 watch:true

經過輪詢判斷文件的最後編輯時間，是否發生變化，當某個文件發生變化，並不會當即告訴監聽者，而是先緩存起來，等aggregateTimeout。

module.exports = {
  // 默認是false ，不開啓狀態
  watch: true,
  // 只有開啓監聽模式watchOptions纔有意義
  watchOptions: {
    // 不監聽的文件或者文件夾，默認爲空，支持正則匹配。
    ignored: /node_modules/,
    // 監聽到變化發生後，會等300ms再去執行更新，默認是300ms 
    aggregateTimeout: 300,
    // 判斷文件是否發生變化，是經過不停的詢問系統指定文件有沒有發生變化實現的，默認每秒問1000次。
    poll: 1000
  },
}	
複製代碼

webpack中的熱更新:webpack-dev-server及其原理

首先安裝: npm i webpack-dev-server -D

在package.json 中配置以下：

"scripts": {
    "dev": "webpack-dev-server --open" 
  },
複製代碼

在webpack.config.js中配置：

const webpack = require('webpack')；
module.exports = {
	 mode: 'development',   // 開發環境
	 plugins: [
	    // webpack 自帶的熱更新插件
	    new webpack.HotModuleReplacementPlugin()
	  ],
	  devServer: {
	    contentBase: './dist',  // webpack服務的基礎目錄
	    hot: true
	  }
}
複製代碼

webpack中的熱更新:webpack-dev-middleware(WDM)及其原理。

WDM將webpack輸出的文件傳輸服務器，適用於靈活的應用場景。

const express = require('express'); 
const webpack = require('webpack'); 
const webpackDevMiddleware = require('webpack-devmiddleware');
const app = express(); 
const config = require('./webpack.config.js'); const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath
}));
app.listen(3000, function () { 
console.log('Example app listening on port 3000!\n');
});
複製代碼

原理分析

webpack compile: 將js編譯成，bundle.js

HMR Server：將熱更新的文件輸出給 HMR Runtime

Bundle server: 提供文件在瀏覽器的訪問

HMR runtime: 會被注入到瀏覽器，更新文件的變化。

bundle.js:構建輸出的文件

原理圖以下所示：

文件指紋策略

打包後輸出的文件名的後綴

文件指紋如何生成？

• hash：整個項目的構建相關，只要項目文件有修改，整個項目的構建的hash就會改變。
• Chunkhash：和webpack打包的chunk有關，不一樣的entry會生成不一樣的chunkhash值。
• contenthash：根據文件內容來定義hash，文件內容不變，則contenthash不變。

js的文件指紋的設置

設置 output 的 filename，使用 [chunkhash]

module.exports = {
	output: {
		filename: '[name]_[chunkhash:8].js',
		path: path.join(__dirname, 'dist')
	},
}
複製代碼

css的文件指紋的設置

設置MiniCssExtractPlugin的filename，使用[contenthash]

佔位符名稱	含義
[ext]	資源後綴名
[name]	文件名稱
[path]	文件的相對路徑
[folder]	文件所在的文件夾
[contenthash]	文件的內容hash，默認是md5生成
[hash]	文件的內容hash，默認是md5生成
[emoji]	一個隨機的指代文件內容的emoji

首先安裝插件 npm install mini-css-extract-plugin -D

在新建的 webpack.prod.js文件中配置：

module: {
    rules: [
      {
        test: /\.js$/,     // 匹配js文件
        use: 'babel-loader' // 用於將ES6等高級語法解析成ES5語法
      },
      {
        test: /\.css$/,
        use: [ // 注意 解析順序是從右往左的，先解析css-loader 後解析style-loader將css插入dom中。 
          // 'style-loader',
          MiniCssExtractPlugin.loader, // MiniCssExtractPlugin是將css代碼提取出來，這兩個loader不能同時使用。
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader, // MiniCssExtractPlugin是將css代碼提取出來，這兩個loader不能同時使用。
          'css-loader',
          'less-loader'    // 用於解析less 
        ]
      },
      {
        test: /\.(png|jpg|gif|svg|jpeg)$/,
        use: [
          {
            loader: 'file-loader',  // file-loader 和url-loader都行
            options: {
              name: '[name]_[hash:8][ext]'
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',  // file-loader 和url-loader都行
            options: {
              name: '[name]_[hash:8][ext]'
            }
          }
        ]
      }
    ]
  },
複製代碼

webpack 的代碼的壓縮

js文件的壓縮

webpack 內置了，uglifyjs-webpack-plugin在打包代碼的時候，會自動壓縮js代碼。

css 文件的壓縮

使用optimize-css-assets-webpack-plugin，同時使用須要依賴 cssnano預處理器

安裝 npm i optimize-css-assets-webpack-plugin cssnano -D

在webpack.prod.js中配置plugins：

const OptimizeCssAssetsWebpackPlugin = requir('optimize-css-assets-webpack-plugin')

plugins: [
	new OptimizeCssAssetsWebpackPlugin({
		assetNameRegExp:/.css$/g,
		cssProcessor: require('cssnano')
	})
],
複製代碼

執行 npm run build 查看壓縮效果

html文件的壓縮

首先安裝插件： npm i html-webpack-plugin -D

在webpack.prod.js配置文件中配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    new MiniCssExtractPlugin({
      filename: `[name]_[contenthash:8].css`
    }),
    new OptimizeCssAssetsWebpackPlugin({
      assetNameRegExp: /.css$/g,
      cssProcessor: require('cssnano')
    }),
    new HtmlWebpackPlugin({  // 一般一個html頁面用一個HtmlWebpackPlugin，若是有兩那就寫兩個
      template: path.join(__dirname, 'src/index.html'),  //html模板所在的位置
      filename: 'index.html',// 指定打包出來的html文件名稱
      chunks: ['index'],// chunk名稱 指定生成的html要使用哪些chunk
      inject: true,// 是否將打包出來的js或者css將自動注入到index.html中
      minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
      }
    }),
    new HtmlWebpackPlugin({  // 一般一個html頁面用一個HtmlWebpackPlugin，若是有兩那就寫兩個
      template: path.join(__dirname, 'src/search.html'),  //html模板所在的位置
      filename: 'search.html',// 指定打包出來的html文件名稱
      chunks: ['search'],// chunk名稱 指定生成的html要使用哪些chunk
      inject: true,// 是否將打包出來的js或者css將自動注入到search.html中
      minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
      }
    }),
  ],
複製代碼

執行 npm run build 查看壓縮效果