webpack高級配置

1.HTML中img標籤的圖片資源處理

使用時、只須要在html中正常引用圖片便可、webpack就會找到對應的資源進行打包、並修改html中的引用路徑

主要是將html中的img路徑文件進行打包、和copy-webpack-plugin是有區別的、copy-webpack-plugin主要是拷貝一些資源文件

項目中的圖片資源都使用html-withimg-loader

項目中的音頻、視頻等資源文件使用copy-webpack-plugin

1. 安裝

   npm i -S html-withimg-loader
   複製代碼

2. 配置 loader

   {
   	test:/\.(htm|html)$/,
   	loader: 'html-withimg-loader'
   }
   複製代碼

2.多頁應用打包

雖然SPA大行其道、可是多頁應用仍是很是重要的

1. 修改配置文件

   entry:{
     index: './src/index.js',
     other: './src/other.js'
   },
   output: {
     path: path.join(__dirname, 'dist'),
     // filename:'bundle.js',
     filename:'[name].js',
     publicPath: '/'
   },
   plugins:[
     // new HtmlWebpackPlugin({
     //   filename: 'index.html',
     //   template: './src/index.html'
     // }),
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: './src/index.html',
       chunks:['index']
     }),
     new HtmlWebpackPlugin({
       filename: 'other.html',
       template: './src/other.html',
       chunks:['other']
     })
   ],
   複製代碼

3.第三方庫的兩種引入方式

能夠經過 expose-loader 進行全局變量的注入、同時也可使用內置插件 webpack.ProvidePlugin 對每一個模塊的閉包空間注入一個變量，自動加載模塊，而沒必要處處import或require

• expose-loader

  將庫引入到全局做用域

  1. 安裝

     npm i -D expose-loader
     複製代碼

  2. 配置loader

     module:{
     	rules:[
     		{
     			test: require.resolve('jquery'),
     			use:{
     				loader: 'expose-loader',
     				options: '$'
     			}
     		}
     	]
     }
     複製代碼

     require.resolve 用來獲取模塊的絕對路徑、因此這裏的loader只會做用於jq模塊而且只有在bundle中使用它時纔會進行處理

• webpack.ProvidePlugin

  將庫自動加載到每一個模塊

  1. 引入webpack

     const webpack = require('webpack')
     複製代碼

  2. 配置

     plugins:[
     	new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery'
       })
     ]
     複製代碼

4.區分環境配置文件打包

項目開發時通常須要使用兩套配置文件、用於開發階段打包(不壓縮代碼、不優化代碼增長效率)和上線階段打包(壓縮代碼、優化代碼，打包後直接上線使用)

• 須要安裝 webpack-merge

  npm i -D webpack-merge
  複製代碼

• 抽取三個配置文件

  • webpack.base.js
  • webpack.prod.js
  • webpack.dev.js

• 實現步驟

  1. 將開發環境和生產環境公用的配置放入base中，不一樣的配置內容放置到各自的prod或者dev文件中，如mode
  2. 在dev和prod中使用 webpack-merge 把本身的配置和base的配置進行合併後導出
  3. 將package.json中的腳本參數進行修改，經過 —config 手動指定特定的配置文件

• webpack配置的路徑問題

Webpack 配置時，相對路徑都是相對於根目錄的，絕對路徑就是配置文件所處的文件目錄，所以在將配置文件放置的不是在根目錄的時候，須要注意絕對路徑是否以根目錄爲參照的

5.定義環境變量

除了區分不一樣的配置文件進行打包、還須要在開發時知道當前的環境時開發階段仍是上線階段、因此能夠藉助內置插件DefinePlugin來定義環境變量、最終能夠實現開發階段和上線階段的區分

1. 引入webpack

   const webpack = require('webpack')
   複製代碼

2. 建立插件對象並定義環境變量

   須要注意 DefinePlugin 設置的值是一個表達式，

   IS_DEV: 'true'是設置IS_DEV爲boolean類型的true

   number: '1 + 1'是設置number爲2，由於是一個表達式，因此'1 + 1'會進行運算將獲得的值賦值給健string: '"設置字符串的值"',設置字符串的值須要多嵌套一層引號

   variables: 'textVar'表明的是將textVar變量的值設置給variables，而不是將textVar做爲字符串賦值給variables

   plugins:[
     new webpack.DefinePlugin({
       IS_DEV: 'true',
       number: '1 + 1',
       string: '"設置字符串的值"',
       variables: 'textVar'
     })
   ]
   複製代碼

3. 在src打包的代碼環境下能夠直接使用

   console.log('我是index js', IS_DEV, number, string)
   複製代碼