webpack小記

把工作中常用的webpack配置，包括loader、plugins、優化等記錄下來，方便學習和查閱。會一直更新本文。

初識webpack

• 在專案裡安裝 webpack、webpack-cli
• 在根目錄新建 webpack.config.js
• webpack4有兩種模式：development、production

entry

• 入口檔案，可以是物件，陣列，字串。
• 物件，key是可以做輸出名字。

output

• path，輸出目錄，絕對路徑。
• filename，輸出檔案的名字

const config = {
  entry:{
      index:'./index'
  },
  output:{
      filename:'[name].[hash].js',   //[name]是entry裡的key，可以加hash
      path:__dirname
  } 
};
複製程式碼

resolve:

• alias，設定別名。

//a.js
const help = requrie('../libs/help/a.js');
//b.js
const help = requrie('../../../libs/help/b.js');
//我們看到用到help裡某個檔案時，要找很多層目錄，可以在配置檔案裡寫入別名。
const config = {
    resolve:{
        alias:{
            help:path.resolve(__dirname,"libs/help")
        }
    }
};
//a.js
const help = requrie('help/a.js');
//b.js
const help = requrie('help/b.js');
複製程式碼

• extensions，省略副檔名，js引入時不需要寫副檔名

module

• noParse，如果確定一個模組沒有其他的依賴，可以配置這項。可以提高打包的速度

const config = {
    module:{
        noParse:[/jquery/],
        rules:[
            {
                test:'匹配的檔案',
                include:'在哪個目錄查詢',
                exclude:'排除哪個目錄',
                loader:'use:[{loader}]的簡寫',
                use:[
                    //配置多個loader，從有往左依次執行
                    {
                        loader:"需要的loader",
                        options:{
                            //loader的相關配置
                        }
                    }
                ]
            }
        ]
    }
}
複製程式碼

• rules，是一個規則陣列，每一項是一個物件，配置loader。

loader

• 在webpack裡，所有的檔案都是模組。loader的作用就是把檔案轉換成webpack可以識別的模組。

ES6、ES7、react

• babel-loader、babel-core
• babel-preset-stage-0 編譯ES7
• babel-preset-2015 編譯ES6
• babel-preset-react 編譯react

{
    module:{
        rules:[
            {
                test: /\.jsx?$/,
                exclude:/node_modules/,
                include:path.resolve(__dirname,'src'),
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                             'es2015','react'
                        ]
                    }
                }
            }
        ]
    }
}
複製程式碼

css、less、sass

• js裡引入css
• style-loader，把css放在style標籤裡插入html裡。
• css-loader，識別css，把css變成一個模組，可以根據options配置css模組化等。
• less-loader 該loader要和less一起使用。

npm install --save-dev less-loader less
複製程式碼

• sass-loader 要和node-sass一起使用。

npm install sass-loader node-sass webpack --save-dev
複製程式碼

const config = {
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                    'style-loader', 
                    {
                        loader:'css-loader',
                        options:{
                            modules:true    //css模組化
                        }
                    }
                    ]
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', {
                    loader:'less-loader',
                    options:{
                        modifyVars:{
                            "color":"#ccc"  //設定變數
                        }
                    }
                }]
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}
複製程式碼

圖片等其他資源

• js裡引入圖片等資源
• file-loader，在輸出目錄生成對應的圖片

{
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif)$/,
                use: ['file-loader']
            }
        ]
    }
}
複製程式碼

• url-loader，很像file-loader，把符合大小把圖片生成base64，不符合的生成圖片

{
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10*1024,
                            name: '[path][name].[ext]'
                        }
                    }
                ]
            }
        ]
    }
}
複製程式碼

html

• html-loader 可以把html頁面中引入的圖片，輸出在相應的輸出目錄

{
    test: /\.(html)$/,
    use: {
        loader: 'html-loader'
    }
}
複製程式碼

plugins

• webpack提供了豐富的外掛介面。外掛可以讓webpack靈活可配置。
• plugins是一個陣列，裡面是每個外掛的例項。

清理檔案

• clean-webpack-plugin 清理檔案

const CleanWebpackPlugin = requrie('clean-webpack-plugin');
const config = {
    plugins:[
        new CleanWebpackPlugin(['輸出目錄'])
    ]
}
複製程式碼

在html里加入資源

• html-webpack-plugin 設定html模版，讓入口js載入到相應的html裡，可以根據引數設定js的位置、順序、是否壓縮、載入哪些js、或者不載入哪些js等功能。

const HtmlWebpackPlugin = requrie('html-webpack-plugin');
const config = {
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html',  //設定模版
            hash:true,  //新增hash
            filename:'hello.html',  //輸出名字
               
        })
    ]
}
複製程式碼

提取css

• extract-text-webpack-plugin，把想要的css提取到相應的檔案裡
• 為了相容webpack4要安裝next版本
• 需要和loader一起使用

npm i extract-text-webpack-plugin@next -S
複製程式碼

//注：此處的[name]生成後為入口檔案的key
const cssExtract = new ExtractTextPlugin('public/[name].[contenthash:8].css');
const lessExtract = new ExtractTextPlugin('public/[name].[contenthash:8].css');
const scssExtract = new ExtractTextPlugin('public/[name].[contenthash:8].css');
const config = {
  module:{
      rules:[
          {
            test: /\.css$/,
            use: cssExtract.extract(['css-loader'])
           },
        {
            test: /\.less$/,
            use: lessExtract.extract({
                use: ['css-loader', 'less-loader']
            })
        },
        {
            test: /\.scss$/,
            use: scssExtract.extract({
                use: ['css-loader', 'sass-loader']	
            })
        }
      ]
  },
  plugins:[
      cssExtract,
      lessExtract,
      scssExtract
  ]  
};
複製程式碼

壓縮混淆程式碼

• (uglifyjs-webpack-plugin)[https://github.com/webpack-contrib/uglifyjs-webpack-plugin]

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const config = {
  module:{
  plugins:[
      new UglifyjsWebpackPlugin({
        test: /\.js($|\?)/i
      })
  ] 
  } 
};
複製程式碼

• 或者用webpack的生產模式

webpack --mode production
複製程式碼

拷貝靜態檔案

• 有時專案中沒有引用的檔案，也需要打包到目標目錄裡
• copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin');
{
    plugins:[
        new CopyWebpackPlugin([
            {
                from:'./src/test',
                to:'./'
            }
        ])
    ]
}
複製程式碼

監聽檔案變化

• webpack定時獲取檔案等更新時間，並跟上次儲存的時間作對比，不一樣就是做了修改。
• poll，每秒鐘詢問的次數
• aggregateTimeout，監聽變化，多少ms後再執行

const config = {
    watch:true,     //watch為true時，watchOptions才生效
    watchOptions: {
        ignored:/node_modules/, //忽略目錄
        aggregateTimeout:300,   //監聽變化 300ms後再執行
        poll:1000   // 預設每秒詢問1000次
    }
}
複製程式碼

webpack-dev-server

• webpack-dev-server，本地伺服器，監聽檔案變化自動重新整理瀏覽器等功能。
• 文件裡是可以實現模組熱更替的，我沒有實現，有好的教程請告訴我，謝謝！

const webpack = require('webpack');
const config = {
    devServer: {
        hot: true, //寫了這項就不會自動重新整理，不寫就會自動重新整理，知道原因的請留言，謝謝！
        open: true,
        inline:true
    },
    plugins:[
       new webpack.HotModuleReplacementPlugin() //不寫會報錯，不知道為什麼。。。
    ]
}
複製程式碼

總結

記錄用到過的webpack loaders、plugins和其他相關配置。後續還會新增提取共程式碼等其他優化處理。

參考

• webpack