webpack學習--基礎篇

 

一、概念

webpack作爲前端構建工具，本質上也是基於node實現的一個工具類。下面官網這張圖很好的介紹了webpack的本質：根據定義的入口，從入口開始，逐級深入，將所有依賴文件通過一定規則編譯成瀏覽器可以識別的文件。

二、基礎配置

webpck有基礎配置可以分爲4類：entry(入口)，output(出口)，loader(加載器)和plugins(插件)。

參考文檔：webpack2.2參考文檔      webpack4.x參考文檔

{
 //入口
 entry: {
        app: './src/main.js'
    },
 //出口
 output: {
        path: path.resolve(__dirname, '../dist'),
        fileName: 'static/js/[name].[chunkhash].js',
        chunkFilename: 'static/js/[id].[chunkhash].js'
    },
 //loader
  module: {
        rules: [
          { 
             test: /\.js$/,
             loader: 'babel-loader?cacheDirectory',
             include: [
                resolve('src'),
                resolve('test')
             ]
          },
        ],
        {
             test: /\.vue$/,
             loader: 'vue-loader',
             options: {
                 ...
             }
        },
  },
 //插件
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new webpack.DefinePlugin({
           'process.env': {}
        }),
    new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: false
        }),
     // extract css into its own file
    new ExtractTextPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].css')
        }),
  ]
}

三、詳細介紹

1. entry(入口)

單個入口：

const config = {
  entry: './path/to/my/entry/file.js'
};

==> 

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};


//也可以自定義key，這個key就是output中[name]的值
const config = {
  entry: {
    app: './path/to/my/entry/file.js'
  }
};

多個入口(多個入口意味着需要配置多個html模板)：

優勢：生成多套模板的同時，可以通過webpack.optimize.CommonsChunkPlugin插件提取共用模塊。

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

 2. output(出口)

path: 輸出目錄

filename: 輸出文件名

chunkFilename: 工程代碼分離出的chunk文件名

3. loader(加載器)

loader告訴webpack該如何去加載匹配的文件

module: {
        rules: [
          { 
             test: /\.js$/,
             loader: 'babel-loader?cacheDirectory',
             include: [
                resolve('src'),
                resolve('test')
             ]
          },
         {
             test: /\.vue$/,
             loader: 'vue-loader',
             options: {
                 ...
             }
        },
        ],
       
  },

test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）

loader：loader的名稱（必須）

include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；

options：爲loaders提供額外的設置選項（可選）

4. plugin(插件)

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程中生效，執行相關的任務。
Loaders和Plugins常常被弄混，但是他們其實是完全不同的東西，可以這麼來說，loaders是在打包構建過程中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操作單個文件，它直接對整個構建過程其作用。

常用插件：

• DefinePlugin: 創建一個在編譯時可以配置的全局常量。在編譯最終生成的文件中，定義的全局常量將被直接替換成對應的值。

plugins: [
        new webpack.DefinePlugin({
            'process.env': { 
                url: 'http://www.baidu.com'
             }
        }),
]

• CommonsChunkPlugin:  一個可選的用於建立一個獨立文件(又稱作 chunk)的功能，這個文件包括多個入口 chunk 的公共模塊。通過將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存起來到緩存中供後續使用。這個帶來速度上的提升，因爲瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件。

 plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: function (module, count) {
                // any required modules inside node_modules are extracted to vendor
                return (
                    module.resource &&
                    /\.js$/.test(module.resource) &&
                    module.resource.indexOf(
                        path.join(__dirname, '../node_modules')
                    ) === 0
                )
            }
        }),
]

• extract-text-webpack-plugin: 將css從js中抽離

use: 指需要什麼樣的loader去編譯文件,這裏由於源文件是.css所以選擇css-loader
fallback: 編譯後用什麼loader來提取css文件

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
        filename: 'style.css'
    }),
  ]
}

• optimize-css-assets-webpack-plugin: 壓縮css文件

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

plugin: [
    new OptimizeCSSPlugin()
]