webpack中文文檔:https://doc.webpack-china.org/concepts/

一、Entry（入口）

1、單個入口（簡寫）語法

// 語法
entry: string|Array<string>

// 用法
module.exports = {
  entry: ‘./index.js‘
}

module.exports = {
  entry: [‘./index.js‘, ‘app.js‘]
}

2、多個入口（對象語法）

// 語法
entry: {[entryChunkName: string]: string|Array<string>}

// 用法
module
 
.exports = {
  entry: {
    index: [‘./index.js‘, ‘./app.js‘],
    vendor: ‘./vendor.js‘
  }
}

3、多頁面應用程

webpack 需要 3 個獨立分離的依賴圖
const config = {
  entry: {
    pageOne: ‘./src/pageOne/index.js‘,
    pageTwo: ‘./src/pageTwo/index.js‘,
    pageThree: ‘./src/pageThree/index.js‘
  }
};

一、output（輸出）

1、用法

// 語法
filename 用於輸出文件的文件名。
目標輸出目錄 path 的絕對路徑。

const
 
 config = {
  output: {
    filename: ‘bundle.js‘,
    path: ‘/home/proj/public/assets‘
  }
};

module.exports = config;

2、多個入口起點

{
  entry: {
    app: ‘./src/app.js‘,
    search: ‘./src/search.js‘
  },
  output: {
    filename: ‘[name].js‘,
    path: __dirname + ‘/dist‘
  }
}

// 寫入到硬盤：./dist/app.js, ./dist/search.js
 

3、使用 CDN 和資源 hash

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

三、loader（用於對模塊的源代碼進行轉換）

1.webpack 加載 CSS 文件，或者將 TypeScript 轉為 JavaScript。為此，首先安裝相對應的 loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ‘css-loader‘ },
      { test: /\.ts$/, use: ‘ts-loader‘ }
    ]
  }
};

2、module.rules 允許你在 webpack 配置中指定多個 loader

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: ‘style-loader‘ },
          {
            loader: ‘css-loader‘,
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

四、plugins（插件）

1、特點

1.參加打包整個過程
2.打包優化和壓縮
3.配置編譯時的變量
4.極其靈活

2.用法

// 在打包過程中會使用UglifyJsPlugin這個插件來對代碼進行一些壓縮整理等
const webpack = require(‘webpack‘);
module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
}

提取相同的代碼
CommonsChunkPlugin

混淆，壓縮代碼的
UglifyjsWebpackPlugin

功能相關
ExtractTextWebpackPlugin
HtmlWebpackPlugin
HotModuleReplacementPlugin
CopyWbpackPlugin

五、思維圖

webpack的四大核心概念