webpack3 0構建學習總結(三)

2021-09-11 10:15:17 字數 1627 閱讀 4346

減少**冗餘, 加快載入速度

plugins: commonschunkplugin(webpack自帶)

配置:

複製**

1. options.name 和 options.names

2. options.filename(公共檔名)

3. options.minchunks(最小出現幾次開始打包)

4. options.chunks(提取**的範圍)

複製**

//提取公共的js

var webpack = require('webpack');

var path = require('path');

module.exports = ,

output: ,

plugins: [

new webpack.optimize.commonschunkplugin()

]}複製**

var webpack = require('webpack');

var path = require('path');

module.exports = ,

output: ,

plugins: [

new webpack.optimize.commonschunkplugin()

]}複製**

如果想保持第三方**的純淨不與webpack**混淆。

var webpack = require('webpack');

var path = require('path');

module.exports = ,

output: ,

plugins: [

//提取公共業務**

new webpack.optimize.commonschunkplugin(),

//new webpack.optimize.commonschunkplugin(),

//使第三方庫和業務**分開

//new webpack.optimize.commonschunkplugin()

new webpack.optimize.commonschunkplugin(),

]}複製**

import

'./subpagea';

import

'./subpageb';

//import * as _ from 'lodash';

//**分割

//動態import (import(/*webpackchunkname: 'subpagea'*/,'./***x').then(function() {}))

require.ensure(, function(), 'vendor');

export

default

'pagea';

複製**

publicpath: 告訴webpack動態載入進來的路徑是什麼

webpack 學習總結

多頁應用單頁應用的打包 通過配置 entry 為單入口還是多入口來決定 乙個入口即乙個頁面 es5 新語法支援 通過babel loader 處理新語法 babel preset env babel 外掛程式預設 babel 外掛程式的集合,由於我們處理es5 需要配置很多外掛程式,單獨配置很麻煩 ...

webpack學習總結 開發環境

首先我們的目標,可以讓 執行,對 除錯的時候方便一些 建立webpack.config.js const require path node 內建核心模組,用來處理路徑問題。module.exports mode development 開發環境 首先我們需要 loader 配置 module ht...

webpack學習總結 生產環境

要求上線的 穩定 js,css的相容處理 執行速度塊 將css改為單獨檔案用link引入 傳輸速度塊 壓縮 mini css extract plugin將取代style loader,作用 提取js中的css 為單獨檔案 乙個 防止html太大,所以弊端就是css檔案太大了 如果是單入口,所以vu...