webpack04----詳細配置：entry、output、module、resolve、dev server、optimization

entry：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // entry: './src/index.js', // string類型   單入口，打包造成一個chunk，輸出一個bundle文件，此時chunk的名稱默認是main
  // entry: ['./src/index.js', './src/add.js'], // array類型   多入口，全部入口文件最終只會造成一個chunk（即便沒有使用add.js，也會一塊兒打包到index.js中），輸出出去只有一個bundle文件。做用：只有在HMR功能中讓html熱更新生效，這種方式針對於使用HMR功能纔會使用
 entry: {
    // object類型   多入口，有幾個入口文件就造成幾個chunk，輸出幾個bundle文件，此時chunk的名稱是key值
    index: ['./src/index.js', './src/count.js'], // 全部入口文件最終只會造成一個chunk，輸出出去只有一個bundle文件，這種寫法無論count.js有沒有使用都會把count.js打包到index.js中    場景：dll對第三方庫進行單獨打包，將多個庫打包到成一個chunk     例如 react:['react', 'react-dom', 'react-router-dom'] 將和react有關的庫都打包到 'react' 這個chunk下
    add: './src/add.js' // 造成一個chunk，輸出一個bundle文件
  },
  output: {
    filename: '[name].js', // [name].js   默認生成文件名：main.js
    path: resolve(__dirname, 'build')
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
}

output：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/[name].js', // 文件名稱（指定目錄+指定名稱）
    path: resolve(__dirname, 'build'), // 輸出文件目錄（未來全部資源輸出的公共目錄）
    // publicPath:'/', // 用於生產環境，全部資源引入公共路徑前綴   'images/a.jpg' --> '/images/a.jpg'
    chunkFilename:'js/[name]_chunk.js', // 非入口chunk的名稱----0_chunk.js  利用import動態導入語法能夠將某個文件單獨打包----import('./add').then(({ default: add }) => {console.log(add(1, 2))})
    // library:'[name]', // 整個庫向外暴露的變量名  var main = ...  場景：使用dll單獨打包時使用
    // libraryTarget: 'window', // 做用於browser端，變量名添加到window平臺上----window["main"] = ...
    // libraryTarget: 'global', // 做用於browser端，變量名添加到node平臺上----window["main"] = ...
    // libraryTarget: 'commonjs', // exports["main"] = ...
    // libraryTarget: 'amd' // define("main", [], function() {})
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
}

module：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 多個loader用use數組
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules下的js文件
        include: resolve(__dirname, 'src'), // 只檢查 src 下的js文件
        enforce: 'pre', // 優先執行    場景：當一種文件被多個loader處理時須要指定loader的執行順序，通常eslint-loader在babel-loader前執行
        // enforce:'post', // 延後執行
        loader: 'eslint-loader', // 單個loader用loader屬性
        options: {} // 其餘配置選項
      },
      {
        oneOf: [] // 如下配置只會生效一個
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
}

resolve：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development',
  resolve: {
    alias: {
      $css: resolve(__dirname, './src/css') // 配置解析模塊路徑別名，優勢：簡寫路徑----import '$css/index.css'，缺點：路徑沒有提示
    },
    extensions: ['.js', '.json', '.jsx', '.css'], // 配置省略文件路徑的後綴名默認js文件和json文件能夠不寫後綴名，這裏最好不要加上css，css文件仍是寫上後綴名不容易出錯，----import '$css/index.css' 能夠寫成 import '$css/index'
    modules: [resolve(__dirname, '../../node_modules', 'node_modules')] // 告訴webpack解析模塊時去找哪一個目錄，精確到最外層的node_modules目錄，解析速度提升
  }
}

dev server：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'), // 運行代碼的目錄
    watchContentBase: true, // 監視 contentBase 目錄下的全部文件，一旦文件發生變化就會 reload
    watchOptions: { ignored: /node_modules/ }, // 忽略文件
    compress: true, // 啓動gzip壓縮
    port: 5001, // 端口號
    host: 'localhost', // 域名
    open: true, // 自動打開瀏覽器
    hot: true, // 開啓HMR功能
    clientLogLevel: 'none', // 不顯示啓動服務器日誌信息
    quiet: true, // 除了一些基本啓動信息外，其餘內容都不要顯示
    overlay: false, // 若是出錯了不要全屏顯示
    proxy: {
      // 服務器代理，解決開發環境跨域問題
      '/api': {
        target: 'http://localhost:3000', // 一旦devServer（5001）服務器接收到 /api/xxx 的請求，就會把請求轉發到另一個服務器（3000）
        pathRewrite: { '^/api': '' } // 發送請求時，請求路徑重寫：將 /api/xxx --> /xxx （去掉/api）
      }
    }
  }
}

optimization：

　　一、安裝插件：npm i terser-webpack-plugin -D

　　二、webpack.config.js：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build'),
    chunkFilename: 'js/[name].[contenthash:10]_chunk.js'
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'production',
  optimization: {
    splitChunks: {
      chunks: 'all' // 對於單入口文件能夠對node_modules提取公共代碼單獨打成一個包，mode必須爲production
      // 如下都是默認值，通常不寫
      // minSize: 30 * 1024, // 大於30kb的chunk纔會去分割
      // maxSize: 0, // 最大沒有限制
      // minChunks: 1, // 要提取的chunk最少被引用1次  例如：import $ from 'jquery'
      // maxAsyncRequests: 5, // 按需加載時並行加載的文件的最大數量
      // maxInitialRequests: 3, // 入口js文件最大並行請求數量
      // automaticNameDelimiter: '~', // 名稱鏈接符
      // name: true, // 可使用命名規則
      // cacheGroups: {
      //   // 分割chunk的組    知足上面的公共規則，如：大小超過30kb，至少被引用一次
      //   vendors: {
      //     test: /[\\/]node_modules[\\/]/, // node_modules文件會被打包到 vendors 組的chunks中 --> vendors~xxx.js
      //     priority: -10 // 優先級
      //   },
      //   default: {
      //     minChunks: 2, // 要提取的chunk最少被引用2次
      //     priority: -20, // 優先級
      //     reuseExistingChunk: true // 若是當前要打包的模塊和以前已經被提取的模塊是同一個，就會複用，而不是從新打包模塊
      //   }
      // }
    },
    /*  
      問題：index.js中引入了add.js，index.js打包後的文件中記錄着add.js文件的hash值，此時若是改動add.js文件但index.js文件未改動再進行打包，兩個文件都進行打包了，此時性能下降了。一個js文件的修改致使了另外一個js文件的緩存失效
      解決：將index.js中記錄的hash值單獨打包，多了一個 runtime-xxx.js文件，打包後的index.js文件中再也不記錄hash值，體積減少不少。此時修改add.js但index.js文件不修改再進行打包，只會打包add.js和runtime-xxx.js，index.js不會從新打包
     */
    runtimeChunk: {
      name: (entrypoint) => `runtime-${entrypoint.name}`
    },
    minimizer: [
      // 配置生產環境的壓縮方案：js和css    webpack4.26版本以上使用terser-webpack-plugin壓縮js代碼
      new TerserWebpackPlugin({
        cache: true, // 開啓緩存
        parallel: true, // 開啓多進程打包
        sourceMap: true // 啓動source-map
      })
    ]
  }
}

 

 

x