webpack4之踩坑總結

1、先放上項目目錄結構

2、問題總結

 一、關於process.env.NODE_ENV問題

剛開始的時候，我想在配置文件中使用到這個環境變量，卻發現一直獲取不到值，暈暈暈，查了資料才知道，這個環境變量是給除配置文件以外的文件使用的。

由於我須要在webpack.base.conf.js配置文件中區分是開發環境仍是生成環境，因而我作了以下處理：

// 第一：在個人npm腳本中加入--mode=production來肯定這是生產環境
"build": "webpack --mode=production --config ./build/webpack.prod.conf.js --color --progress"

// 第二：經過process.argv判斷是否存在標識--mode=production來區分開發環境和生產環境
const isProduction = process.argv.indexOf('--mode=production') > -1;

 二、關於clean-webpack-plugin插件清除文件問題

// 剛開始的時候我只是這樣作了一個簡單的配置，覺得能夠生效
// 然而，然並卵
new CleanWebpackPlugin('dist')

 

// 以後在閱讀了插件源代碼和編譯提示以後，才找到問題所在（ps：源代碼量很少）
// 第一：該插件只會清除插件所在文件夾下的子文件
// 第二：因爲個人配置文件是在build目錄下，因此插件的根目錄在build文件夾
// 第三：由於我要刪除的dist文件夾是build的兄弟目錄，因此插件會跳過跳過跳過刪除操做
// 綜上所述，正確的操做是：設置項目根目錄爲插件的根目錄

new CleanWebpackPlugin('dist', {
    root: path.join(__dirname, '../')
})

 

三、關於extract-text-webpack-plugin提取css問題

剛開始個人配置是這樣子的，忽視了個人配置是多入口的。在我打包出來以後，個人一部分css代碼被提取出來的，而我配置成css module的代碼卻一直沒有提取出來，由於這個問題，我找了一個晚上仍是沒有找出問題所在。

new ExtractTextPlugin("styles.css")

 

直到，我在webpack文檔中我看到了這樣的一段話：

警告: ExtractTextPlugin 對 每一個入口 chunk 都生成一個對應的文件，因此當你配置多個入口 chunk 的時候，你必須使用 [name], [id] 或 [contenthash]

 

從這個時候我才明白，之因此存在「只提取部分代碼的問題「，是由於我只設置了一個文件，致使了文件內容覆蓋，後面入口文件提取出來的css覆蓋了前面入口文件提取出來的css。

哭暈在廁所。。。

// 正確的操做以下：
new ExtractTextPlugin({
    // 若是須要加上文件目錄'css/[name].css'，則須要考慮css裏面應用文件相對目錄問題
    filename: '[name].css',
    allChunks: true
})

 

四、關於css文件壓縮問題

剛開始，我用了css-loader提供的minimize選項，不可能的，這輩子都不可能完成壓縮的

{
    loader: 'css-loader',
    options: {
        minimize: true
    }
}

 

查了資料才發現，原來css-loader已經在新版本已經移除了minimize這個壓縮選項，而推薦了其餘的方案：

use postcss-loader with cssnano
use optimize-cssnano-plugin

 

而我採起了其中的第一種壓縮方案，即postcss的方案，順便也學習下postcss的配置，安裝了postcss-loader和cssnano依賴以後，須要作以下配置：

// 第一：在須要用postcss處理的文件加入postcss-loader
test: /\.css/,
use:['style-loader','css-loader','postcss-loader']

 

// 第二：配置postcss，須要在項目根目錄新建文件postcss.config.js
module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default'
        }),
    ]
};

 

五、有待更新...

3、總結

在學習webpack的過程當中，我主要以webpack中文文檔（https://webpack.docschina.org/concepts/）和github這兩個網站爲主，固然也少不了百度和google。學習下來發現，只要你認真看官方文檔及去github上找官方給出來的示例，總能找到你的解決方案。

最後，貼出個人demo（https://github.com/xieqian-xq/demo/tree/master/webpack）。

還請各位大神多多指教