必懂的webpack高級配置

時間 2019-11-10

標籤懂的 webpack 高級配置简体版

原文原文鏈接

webpack高級配置

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

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

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

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

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

安裝npm
```
npm i -S html-withimg-loader
```

配置 loaderjson

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

2.多頁應用打包

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

修改配置文件ide

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或requirepost

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

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

引入webpack
```
const webpack = require('webpack')
```

配置

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來定義環境變量、最終能夠實現開發階段和上線階段的區分

引入webpack
```
const webpack = require('webpack')
```
建立插件對象並定義環境變量

須要注意 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'
  })
]
```

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

console.log('我是index  js', IS_DEV, number, string)

往期文章列表

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。