Webpack知識彙總

時間 2019-11-10

標籤 webpack 知識彙總简体版

原文原文鏈接

介紹

webpack把任何一個文件都當作是一個模塊，模塊間能夠相互依賴（require or import），webpack的功能就是把相互依賴的文件打包在一塊兒。webpack自己只能處理原生的Javascript模塊，可是它支持的各類loader轉換器能夠將各類類型的資源轉換成javascript模塊。這樣任何資源均可以成爲webpack能夠處理的模塊。同時，webpack還有豐富的插件plugin, 能夠完成例如js,css的壓縮，公共依賴模塊的提取和注入，甚至利用模板對html進行動態拼接等功能。同時，webpack使用commonjs規範（require)，支持es6語法（import）的編譯。官方網站：https://doc.webpack-china.org/javascript

深刻淺出webpack系列教程：http://www.cnblogs.com/ghostwu/p/7499237.htmlcss

1.安裝webpack

　　npm install webpack -g //全局安裝html

　　npm install webpack --save-dev //開發環境java

2 使用

在package.json文件同級目錄中建立一個webpack.config.js文件，這個文件是webpack的配置文件。node

const webpack = require('webpack');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    
    //頁面入口文件配置
    entry: {
       polyfills: './src/main/webapp/app/polyfills',
        global: './src/main/webapp/content/scss/global.scss',
        main: './src/main/webapp/app/app.main'
    },
    //入口文件輸出配置
    output: {
        path: utils.root('build/www'),
        filename: 'app/[name].bundle.js',
        chunkFilename: 'app/[id].chunk.js'
    },
    module: {
        //加載器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //解析模塊路徑時的配置
    resolve: {
        root: 'E:/github/flux-example/src', //絕對路徑,查找module的話從這裏開始查找
        extensions: ['', '.js', '.json', '.scss'], //自動擴展文件後綴名，意味着咱們require模塊能夠省略不寫後綴名
        alias: {  //別名配置，，方便後續直接引用別名，無須多寫長長的地址
            AppStore : 'js/stores/AppStores.js',  ////後續直接 require('AppStore') 便可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    },
//插件項
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                chunks: ['main'],
                minChunks: (module) => utils.isExternalLib(module)
            }),
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 9000,
            proxy: {
                target: 'http://localhost:9060',
                ws: true
            }
        }, {
            reload: false
        }),
        new HtmlWebpackPlugin({
                template: './src/main/webapp/index.html',
                chunksSortMode: 'dependency',
                inject: 'body'
         })
   ],
};

webpack.config.js配置參數（詳細說明：https://zhuanlan.zhihu.com/p/21346555）

devtool: 'eval-source-map' //webpack就能夠在打包時爲咱們生成的source maps，這爲咱們提供了一種對應編譯文件和源文件的方法，使得編譯後的代碼可讀性更高，也更容易調試react

在webpack的配置文件中配置source maps，須要配置devtool，它有如下四種不一樣的配置選項，各具優缺點，描述以下：jquery

devtool選項	配置結果
`source-map`	在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的`source map`，可是它會減慢打包速度；
`cheap-module-source-map`	在一個單獨的文件中生成一個不帶列映射的`map`，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；
`eval-source-map`	使用`eval`打包源文件模塊，在同一個文件中生成乾淨的完整的`source map`。這個選項能夠在不影響構建速度的前提下生成完整的`sourcemap`，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。在開發階段這是一個很是好的選項，在生產階段則必定不要啓用這個選項；
`cheap-module-eval-source-map`	這是在打包文件時最快的生成`source map`的方法，生成的`Source Map` 會和打包後的`JavaScript`文件同行顯示，沒有列映射，和`eval-source-map`選項具備類似的缺點；

正如上表所述，上述選項由上到下打包速度愈來愈快，不過同時也具備愈來愈多的負面做用，較快的打包速度的後果就是對打包後的文件的的執行有必定影響。webpack

對小到中型的項目中，eval-source-map是一個很好的選項，再次強調你只應該開發階段使用它。git

cheap-module-eval-source-map方法構建速度更快，可是不利於調試，推薦在大型項目考慮時間成本時使用。es6

devServer: { //設置 webpack-dev-server 的相關配置，devServer的更多配置信息參考https://webpack.js.org/configuration/dev-server/

contentBase: './build/www', //本地服務器所加載的頁面所在的目錄

proxy: [{

context: [],

target: 'http://127.0.0.1:8080',

secure: false,

ws: true/false

}],

historyApiFallback: true,//不跳轉

inline: true, //實時刷新

hot: true

}，

devserver的配置選項	功能描述
contentBase	默認webpack-dev-server會爲根文件夾提供本地服務器，若是想爲另一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄（本例設置到「public"目錄）
port	設置默認監聽端口，若是省略，默認爲」8080「
inline	設置爲`true`，當源文件改變時會自動刷新頁面
historyApiFallback	在開發單頁應用時很是有用，它依賴於HTML5 history API，若是設置爲`true`，全部的跳轉將指向index.html

entry: {}

output: {

path: '',

filename: '',

publicPath: '',

chunkFilename: ''

resolve: {

alias: [], //設置模塊別名

root: '', //包含你模塊的目錄（必須是絕對路徑），一般是一個目錄數組，這個設置應該被用於添加我的目錄到webpack查找路徑裏.

modulesDirectories：[], //解析目錄名的一個數組到當前目錄以及先前的目錄，而且是查找模塊。這個函數和node怎麼找到node_modules很像。好比若是值爲 // // ["mydir"]，webpack會查找「./mydir」, 「../mydir」, 「../../mydir」,等等。默認: ["web_modules", "node_modules"]

extensions: [] //解析模塊的拓展名的數組。設置這個選項將會重寫默認值，這意味着webpack再也不試着用默認的拓展名解析模塊，若是你但願模塊加載的時候帶着他們的拓展名也能夠獲得正確額解析(好比require('./somefile.ext'))，你須要在你的數組裏添加一個空字符串。若是你但願模塊加載不帶拓展名(好比require('underscore'))能夠解析爲「.js」的拓展名。你必須在數組裏包含".js".

externals: [], // 指定的依賴不會被webpack解析，但會成爲bundle裏的依賴。output.libraryTarget.決定着依賴的類型。值是對象，字符串，函數，正則，數組都會被接受。

stats: {}

module: {

rules（或loaders）: [

{

test: string, //必須知足的條件，正則表達式（測試絕對路徑），包含絕對路徑的字符串

enforce: string,

loaders: ['','',...] , //多個loader

loader: string, //用「！」隔開多個loader

exclude: ['','',...], //不知足的條件

include: ['','',...] //必須知足條件

{ test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ },

{
       test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader",
 options: { modules: true } },
 { loader: "postcss-loader" } ] }options: { modules: true }{ loader: "postcss-loader" }

preLoaders: [],

postLoaders: [],

noParse: []

Loaders須要單獨安裝而且須要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括如下幾方面：

test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
loader：loader的名稱（必須）
include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；
query：爲loaders提供額外的設置選項（可選）

plugins: []

webpack命令參數：

$ webpack --config XXX.js //使用另外一份配置文件（好比webpack.config2.js）來打包

$ webpack --watch //監聽文件是否有改變，有改變就會從新編譯有改變的文件

$ webpack -p//壓縮混淆腳本

$ webpack -d//生成map映射文件，告知哪些模塊被最終打包到哪裏了
$ webpack --progress //顯示打包過程進度條
$ webpack --color //配置打包輸出顏色顯示

3 各類插件

NoErrorsPlugin插件：該插件能夠在webpack打包過程當中遇到錯誤時跳過，不終止webpack進程～

PrefetchPlugin插件：該插件的做用是當一個模塊還未被require以前，提早解析和創建一個對該插件的請求，能夠起到必定的優化打包時間的效果。其中兩個參數第一個是模塊的絕對路徑，第二個是對模塊的請求字符串，eg.

new webpack.PrefetchPlugin(__dirname +」/node_modules」,」react/react.js」)

HotModuleReplacementPlugin插件：熱更新所需插件，實現模塊變更部分的替代而不從新刷新頁面，有效提升調試時間

HtmlWebpackPlugin插件：能夠爲你生成一個自動引用你打包後的JS文件的新index.html

BrowserSyncPlugin插件：它當你的webpack或webpack-dev-server 執行徹底後，自動爲你的應用打開瀏覽器～

new BrowserSyncPlugin({
        host: 'localhost',
        port: 9000,
       // 代理服務器配置
        proxy: {
            target: 'http://localhost:9060',
            ws: true
        }
   }, {
      reload: false
})

Webpack.DefinePlugin插件：能夠定義編譯時的全局變量，有不少庫（React, Vue等）會根據 NODE_ENV 這個變量來判斷當前環境。爲了儘量減小包大小，在生產環境中要定義其爲 JSON.stringify(「production」)

plugins: [
      new webpack.DefinePlugin({
        "process.env.NODE_ENV": "development"
        })
    ]

Webpack.optimize.CommonsChunkPlugin插件：它用於提取多個入口文件的公共腳本部分，而後生成一個 common.js 來方便多頁面之間進行復用

具體使用方法見http://www.jianshu.com/p/2b81262898a4

Webpack.ContextReplacementPlugin插件：

Webpack.ProvidePlugin插件：定義一些在import時能自動引入的變量，如定義了 $: 'jquery' 後，能夠在文件中直接使用$，webpack能夠自動幫你加上 var $ = require('jquery')。

Webpack.LoaderOptionsPlugin插件

Webpack.NoEmitOnErrorsPlugin插件：

Webpack.NamedModulesPlugin插件

Webpack.WatchIgnorePlugin插件：

FaviconsWebpackPlugin插件：該插件則能夠爲不一樣的設備自動生成超過30種的favicon(它們的來源都是同一張圖片)

CopyWebpackPlugin插件：

MergeJsonWebpackPlugin插件：

StringReplacePlugin插件：

WebpackNotifierPlugin插件：

writeFilePlugin插件：

ExtractTextPlugin: 分離CSS和JS文件。

new ExtractTextPlugin("style.css")

DedupePlugin插件：可在production環境下幫助刪除重複或類似文件，能夠有效減小文件大小（用於打包文件優化，建議使用在生產環境）

OccurrenceOrderPlugin插件：根據出現次數爲每個模塊或者chunk設置id,常用的模塊則會獲取到較短的id(和前綴樹相似)，這可使id可預測並有效減小文件大小，建議使用在生產環境中～

NpmInstallPlugin插件：這個並未在webpack官網的插件列表內提到過，可是我的認爲它經過自動幫助咱們安裝依賴而提高了咱們的開發效率，https://github.com/ericclemmons/npm-install-webpack-plugin，具體效果能夠看下官網～

plugins: [
  new NpmInstallPlugin({
    // Use --save or --save-dev
      dev: false,
    // Install missing peerDependencies
    peerDependencies: true,
  });
],

webpack.optimize.UglifyJsPlugin插件：壓縮js

new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,

          // Drop `console` statements
          drop_console: true
        }
      })

4 模塊

webpack-merge: 能夠把分開配置的config合併，分開生產環境和調試環境

const merge = require('webpack-merge');
const commonConfig= {};

module.exports = merge(commonConfig, {});

webpack-validator：驗證咱們的config是否正確

const merge = require('webpack-merge');
const validate = require('webpack-validator');

const commonConfig = {};
const config = merge(commonConfig, {});
module.exports = validate(config);