webpack4.x最新入門配置詳解2

目錄

• 1. 全局變量引入問題
  引入jquery後，如何配置使用$和window.$
• 2. 圖片處理問題
  如何打包html,js,css裏的圖片引用
• 3. 打包文件分類
  不同的文件打包到對應的文件夾下
• 4. 打包多頁應用
  打包多個html頁面
• 5. 配置source-map
  使用源碼映射，更好的調試代碼
• 6. watch的用法
  實時更新打包
• 7. webpack小插件應用
  打包前清空文件目錄，拷貝文件到打包目錄，版權申明註釋

1. 全局變量引入問題

有一些第三方模塊需要依賴window上的jquery

安裝jquery:

npm i jquery

使用jquery:

import $ from 'jquery';
console.log($)
console.log(window.$)  // undefined

由上圖可以看出，$沒有暴露給window

解決方法:
安裝：

 npm i expose-loader -D

使用：
方式一：內聯loader的方法：

import $ from 'expose-loader?$!jquery';

方式二：webpack.config.js->module->rules裏配置：

{
 test:require.resolve('jquery'),
 use:'expose-loader?$'
},

前面的方法都需要在使用jquery的地方import導入
那麼，如何直接使用$,無需import呢？
解決方法：
在每個模塊中注入$對象
webpack.config.js中聲明：

let webpack = require('webpack')

webpack.config.js->plugins中配置插件：

new webpack.ProvidePlugin({  // 在每個模塊中注入$對象
    $:'jquery'
})

這樣子就可以無需import,直接使用$, 但是window.$又變爲undefined

還有一種情況，我們無需用第三方模塊引入jquery,直接在頁面中通過script標籤引入

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

這種方式就可以直接拿到window.$

引入第三方模塊方式總結：

• expose-loader 暴露到window上
• providePlugin 每個模塊中注入$對象
• 引入不打包方式<script>

2. 圖片處理問題

如何在webpack中使用圖片，並且打包圖片

圖片的引入方式有：

• 在JS中創建圖片來引入
• 在CSS中使用background:url()
• <img src="" alt="" />

安裝file-loader：
默認會在內部生成一張圖片，到build目錄下；
把生成的圖片的名字返回回來

 npm i file-loader -D

webpack.config.js->module->rules裏配置：

{
   test:/\.(png|jpg|gif)$/,
   use:'file-loader'
},

使用：
JS中引入圖片：

import logo from './favicon.png'
let image = new Image();
console.log(logo)
image.src = logo;
document.body.appendChild(image)

CSS中引入圖片：

body{
    background: pink;
    /* css-loader會將地址轉換爲require(url) */
    background: url("./favicon.png")  
}

html中引入圖片：
安裝：

npm i html-withimg-loader -D

webpack.config.js->module->rules中配置：

{
    test:/\.html$/,
    use:'html-withimg-loader' // 解析html中的圖片資源
},

需要將原先file-loader模塊配置修改如下：

{
    test:/\.(png|jpg|gif)$/,
    use:[{
        loader:'file-loader',
        options:{
            esModule:false
        }
    }]
},

html頁面中就可以直接使用：

<img src="./favicon.png" alt=""/>

另外，有時候我們需要的圖片比較小，這個時候，我們不希望請求圖片，就可以使用base64
安裝：

 npm i url-loader -D

webpack.config.js->module->rules中配置：

{
    test:/\.(png|jpg|gif)$/,
    use:{
        loader:'url-loader',
        options:{
            limit:200*1024 // 做一個限制，當圖片<200k的時候，用base64來轉化,否則用file-loader
        }
    }
},

注意：base64不會發送請求，但會比原圖片大1/3

3. 打包文件分類

如果我們想把打包的文件如：img，css, js等輸出到相應的目錄下，該怎麼做？
圖片打包輸出路徑配置：

{
   test:/\.(png|jpg|gif)$/,
   use:{
       loader:'url-loader',
       options:{
           limit:1,// 做一個限制，當圖片<200k的時候，用base64來轉化,否則用file-loader
           esModule:false,
           outputPath:'img/' // 圖片打包輸出路徑，img文件下
       }
   }

},

CSS打包輸出路徑設置：
webpack.config.js->plugins

new MiniCssExtractPlugin({
    filename:'css/main.css'  // 抽離出的文件名, 打包輸出到css文件下

}),

如果我們的CSS，圖片等路徑是在域名網址下的，如何配置?
webpack.config.js->output 添加屬性：
示例：

publicPath:'http://www.baidu.com/'

打包後的html：

由上圖可以看出，js,img,css等路徑都加上了設置好的www.baidu.com
如果，我們只需要給圖片設置域名路徑，其他不需要，該怎麼做？
很簡單，可以直接在圖片的配置里加上publicPath:'http://www.baidu.com/'屬性設置：
例如：

{
   test:/\.(png|jpg|gif)$/,
   use:{
       loader:'url-loader',
       options:{
           limit:1,// 做一個限制，當圖片<200k的時候，用base64來轉化,否則用file-loader
           esModule:false,
           outputPath:'img/', // 圖片打包輸出路徑
           publicPath:'http://www.baidu.com/'
       }
   }
},

4. 打包多頁應用

目錄結構如下：

將index.js和other.js分別打包引入到index.html和other.html中：
webpack.config.js配置如下：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode:'development',
    // 多入口
    entry: {
        home: './src/index.js',
        other:'./src/other.js'
    },
    output:{
        // [name] 這裏表示home或other
        filename:'[name].js',
        path: path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'home.html',
            chunks:['home']  // 打包生成的home.html引入home.js
        }),
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'other.html',
            chunks:['other'] // 打包生成的other.html引入other.js
        }),

    ]
}

如果想在打包生成的index.html引入多個js文件，只需在chunks屬性值數組裏添加即可，如：

chunks:['other','home'] // 打包生成的html中引入other.js和home.js

5. 配置source-map

我們前面打包生成的代碼，如果運行後出現錯誤，點擊控制檯的錯誤，跳轉到打包後的源碼錯誤地方，這個源碼是壓縮的，因此很難調試。

配置source-map源碼映射，即可以輕鬆調試源碼。

webpack.config.js配置裏添加：
方式一：
會單獨生成一個sourcemap文件，用於調試代碼；出錯了，會標識錯誤的列和行

devtool:'source-map', // 源碼映射，會單獨生成一個sourcemap文件，用於調試代碼；出錯了，會標識錯誤的列和行

方式二：
不產生單獨的文件，但可以顯示錯誤列

devtool:'eval-source-map',

方式三：
產生一個單獨的文件，不顯示錯誤列

devtool:'cheap-module-source-map', // 產生後可以保留起來，用於調試

方式四：
不產生單獨文件，不顯示錯誤列，集成在打包文件中

devtool:'cheap-module-eval-source-map',

6. watch的用法

前面，我們每次改完代碼，都需要手動npm run build重新打包。
那麼如何實現自動監控實時打包呢？

webpack.config.js配置裏添加：

watch:true, // 打開監控
watchOptions:{ // 監控的選項
    poll:1000, // 每秒監控1000次
    aggregateTimeout:500,  // 防抖 我一直輸入代碼，等我停了後500ms後打包
    ignored:/node_modules/  // 不需要監控的文件
},

7. webpack小插件應用

介紹三個插件：

• cleanWebpackPlugin
• copyWebpackPlugin
• bannerPlugin

前兩個是第三方模塊的，第三個是內置的；

cleanWebpackPlugin插件
有時候，我們不斷打包生成的文件會不斷的堆積，例如：
我們用hash值生成文件名，第一次打包生成index23847583.html文件放在在dist文件夾下，第二次打包生成的index49582038.html文件放在dist文件夾下，第三次。。。
使用這個插件可以在我們打包輸出目錄之前，將原先的dist文件夾清空

安裝：

 npm i clean-webpack-plugin -D

配置：
webpack.config.js裏配置：

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

webpack.config.js->plugins 裏添加：

new CleanWebpackPlugin()

copyWebpackPlugin插件
如果你想將一些文件拷貝到dist文件中，可以使用該插件；

安裝：

npm i copy-webpack-plugin -D

配置：
webpack.config.js裏配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');;

webpack.config.js->plugins 裏添加：

new CopyWebpackPlugin([
   {from:'./doc',to:'./'}
])

如圖所示，上述配置，將doc裏的文件拷貝到了dist文件中；

bannerPlugin插件
版權申明插件，它是webpack內部的插件
因此，先在webpack.config.js中聲明：

const webpack = require('webpack');

webpack.config.js->plugins 裏添加：

new webpack.BannerPlugin('該代碼爲小仙女所寫！')

效果如下：