webpack作用:處理程式碼壓縮混淆、瀏覽器端js的相容性以及效能優化

webpack在專案中安裝過程

1、

npm i webpack webpack-cli -g //全域性安裝webpack（必須） npm i [email protected] [email protected] -D //區域性安裝 Webpack 到專案（必須）

2、

webpack.config.js 配置

/* 
webpack.config.js:指示webpack幹哪些活(當你執行webpack指令時，會載入這裡面的內容)
        注：所有構建工具都是基於node.js平臺執行的 模組化採用commonjs
 */
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //新建模板骨架外掛
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //引入從js中提取css的外掛
const WorkboxWebpackPlugin=require("workbox-webpack-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin"); //壓縮css外掛
​
//如果browserslist要開發模式則需要設定nodejs的環境變數
process.env.NODE_ENV = "development";
​
/* 
快取：
  babel快取：
    設定 cacheDirectory:true,   作用:開啟快取機制。讓第二次打包速度更快
  檔案資源快取：
    hash每次webpack構建都會生成唯一的hash值
      問題：因為css和js用的是同一個hash值，如果重新打包則會導致所有快取失效
            但我可能只改動了一個檔案
      解決：Chunkhash 根據打包入口生成的hash值。入口一樣chunk一樣
      問題：css和js還是同一個hash值 因為css是在js中被引入的 所有同屬一個chunk
      最終解決：使用contenthash：根據檔案內容生成hash值，檔案內容不一樣hash值一定不一樣(不考慮雜湊碰撞)
      作用：讓程式碼上線執行快取更好使用
*/
​
​
/* 
tree shaking(樹搖 把沒有用的葉子搖下去): 去除在應用程式中沒有應用到的程式碼，使程式碼體積更小
前提：1、必須使用es6模組化  2、開啟production環境
​
  在package.json中配置 "sideEffects":false 即所有程式碼沒有副作用都可以進行"樹搖" 可能會誤搖css或者js檔案
  例：不要搖css檔案 則在package.json中配置 "sideEffects":["*.css"]
*/
​
/* 
PWA(離線訪問技術)：workbox-webpack-plugin
​
*/
/* 複用css */
const commonCssLoader = [
  //在頁面中建立style標籤，將js中的'樣式字串'插入標籤並新增到head生效
  // "style-loader",
  /*
  取代style-loader 提取js中的css單獨成檔案  同時html自動引入
  將CSS檔案變成commonjs模組載入到js中，裡面內容是樣式字串 
  */
  MiniCssExtractPlugin.loader,
  "css-loader",
​
  /* 
  解決CSS相容性問題：postcss-loader --> postcss-preset-env 
  幫postcss找到package-json中的browserslist裡面的配置，通過配置載入指定的相容性
  */
​
  //修改配置要以物件的方式     browserslist預設是生產模式 與mode無關
​
  {
    loader: "postcss-loader",
    options: {
      ident: "postcss",
      plugins: () => [
        //postcss的外掛
        require("postcss-preset-env")(),
      ],
    },
  },
],;
​
​
​
module.export = {
  entry: "./src/index.js",    //單頁面  單入口
/* 
  entry: {
    index:"./src/index.js",
    text:"./src/text.js"          //多頁面  多入口  一個入口生成一個bundle.js檔案  kv形式
  },
*/
  output: {
    //[name]取檔名  多入口的情況下使用    1強2
    filename: "js/[name].[Contenthash:10].js", //輸出檔名
    path: resolve(__dirname, "build"), //_dirname是當前檔案的目錄絕對路徑(即Webpack)
  },
  //loader的配置
  //不同檔案要配置不同的loader處理
  module: {
    rules: [
      {
        /* 對js進行語法檢查 eslint-loader eslint 
          注:只檢查自己寫的原始碼，第三方的庫不用檢查
          檢查規則在package.json中eslintConfig中設定
          "eslintConfig":{
            "extends":"airbnb-base"     繼承下載的airbnb-base庫中的規則
          }
​
          airbnb規則需要三個外掛 eslint-config-airbnb-base、eslint、eslint-plugin-import
        */
        test: /\.js$/,
        exclude: /node_modules/, //排除檢查第三方庫是否錯誤
        loader: "eslint-loader",