webpack 專案常用配置

這裡我整理了一些webpack的常用配置，適用於稍有webpack基礎的同學閱讀，也給自己以後的工作提供一些便利。有些地方沒做詳細說明，如有不明，請查閱官網手冊或各種大牛部落格。

閱讀前大家最好先瀏覽一下webpack官網，了解一下webpack是什麼樣的乙個工具，同時對怎麼利用webpack搭建乙個工程也要有所了解。（中文**：英文**：

工程目錄：

公共配置項：webpack.common.js

const htmlwebpackplugin = require('html-webpack-plugin');   //自動生成html外掛程式

const = require('clean-webpack-plugin'); //打包前清空打包資料夾(dist)
const merge = require("webpack-merge"); //配置檔案合併外掛程式
const path = require('path');
const webpack = require("webpack");
const prodconfig = require("./webpack.prod");
const devconfig = require("./webpack.dev");
const commonconfig = ,
module: ]] //es6翻譯成es5
// }
}, ,}}
]},plugins: [
new htmlwebpackplugin(), //打包結束自動生成html,自動引入bundle.js
new cleanwebpackplugin(), //打包前清空dist
new webpack.provideplugin()
],optimization: ,
// default: {} //不屬於vendors進入, 
// }}},
performance: false,
output: 
}module.exports = (env) => else 
}

const minics***tractplugin = require('mini-css-extract-plugin');    //css**分割用外掛程式

const optimizecssassetsplugin = require('optimize-css-assets-webpack-plugin'); //css壓縮外掛程式
const workboxplugin = require('workbox-webpack-plugin');
const prodconfig = )], //css壓縮
},module: 
},'sass-loader',
'postcss-loader'
] //有順序,從下到上,從右到左
}, ]
},plugins: [
new minics***tractplugin(),
new workboxplugin.generatesw()
],output: 
}module.exports = prodconfig;

const webpack = require("webpack");

const devconfig = ,
module: 
},'sass-loader',
'postcss-loader'
] //loader載入有順序,從下到上,從右到左
}, ]
},plugins: [
new webpack.hotmodulereplacementplugin() //啟用hmr
],output: 
}module.exports = devconfig;

一、tree shaking 只支援 es module模組引入方式（import）。

二、**分割和webpack無關

1、同步**： 在webpack.common.js配置optimization

2、非同步**無需操作，會自動分割打包。

三、webpack中，多寫非同步**，有助於提公升效能，如：

//如此方式(import)引入lodash懶載入,使用時才載入

async function getcomponent() = await import(/* webpackchunkname:"lodash" */ 'lodash');
const element = document.createelement('div');
element.innerhtml = _.join(["a,b,c", "d"], "-");
return element;
}//tips：
/* webpackprefetch: true */ //魔法注釋,主檔案載入完,空閒載入所需模組,提公升效能
import(/* webpackprefetch: true */'./click.js').then(()=> )

1、合理使用外掛程式，盡量刪除多餘外掛程式

2、及時公升級版本

3、降低loader作用範圍，合理使用exclude

4、第三方外掛程式只需打包一次，借助dllplugin、dllreferenceplugin

webpack配置多頁面專案

相信經常使用webpack的人已經深刻體驗到自動化工具給我們帶來的便利。我自己最常用的是vue,平時就是使用vue cli或者nuxt構建的專案，聰明的前輩已經為我們配好了專案，可以讓我們不必去配置就可以輕鬆使用。我現在做的這個專案只有簡單的兩個頁面，不基於任何框架。about.html,conta...

vue cli的webpack模版專案配置解析

var chalk require chalk 定製終端字串的顏色輸出樣式 var semver require semver 語義化版本控制規範 var packageconfig require package.json var shell require shelljs 呼叫系統命令 呼叫子執...

webpack外掛程式配置及常用外掛程式

plugins new webpack.provideplugin new webpack.ignoreplugin locale moment 有的外掛程式是開發模式不用，到生產模式下才用,可如下設定 production 指生產模式 new webpack.optimize.uglifyjspl...