通用、封裝、簡化 webpack 配置
通用、封裝、簡化 webpack 配置
如今，基本上前端的項目打包都會用上 webpack，由於 webpack 提供了無與倫比強大的功能和生態。但在建立一個項目的時候，老是免不了要配置 webpack，非常麻煩。css
簡化 webpack 配置的一種方式是使用社區封裝好的庫，好比 roadhog。roadhog 封裝了 webpack 的一些基礎配置，而後暴露一些額外配置的接口，並附加本地數據模擬功能(mock)，詳情能夠參考 roadhog 主頁。html
另外一種方式是本身封裝 webpack，這樣作本身可以更好的掌控項目。前端
1. 要封裝哪些功能
通常搭建一個項目至少須要兩種功能：本地開發調試、構建產品代碼。vue
其餘的諸如測試、部署到服務器、代碼檢查、格式優化等功能則不在這篇文章講解範圍，若是有意瞭解，能夠查看個人其餘文章。node
2. 基礎配置
2.1 目錄結構（示例，配合後面的代碼講解）
package.json
dev.js # 本地開發腳本
build.js # 產品構建腳本
analyze.js # 模塊大小分析（可選）
# 單頁面結構
src/ # 源代碼目錄
- index.js # js 入口文件
- index.html # html 入口文件
- ... # 其餘文件
# 多頁面結構
src/ # 源代碼目錄
- home/ # home 頁面工做空間
- index.js # home 頁面 js 入口文件
- index.html # home 頁面 html 入口文件
- ... # home 頁面其餘文件
- explore/ # explore 頁面工做空間
- index.js # explore 頁面 js 入口文件
- index.html # explore 頁面 html 入口文件
- ... # explore 頁面其餘文件
- about/ # about 目錄
- company # about/company 頁面工做空間
- index.js # about/company 頁面 js 入口文件
- index.html # about/company 頁面 html 入口文件
- ... # about/company 頁面其餘文件
- platform # about/platform 頁面工做空間
- index.js # about/platform 頁面 js 入口文件
- index.html # about/platform 頁面 html 入口文件
- ... # about/platform 頁面其餘文件
- ... # 更多頁面
2.2 基礎 npm 包
# package.json
"devDependencies": {
"@babel/core": "^7.1.2", # babel core
"@babel/plugin-syntax-dynamic-import": "^7.0.0", # import() 函數支持
"@babel/plugin-transform-react-jsx": "^7.0.0", # react jsx 支持
"@babel/preset-env": "^7.1.0", # es6+ 轉 es5
"@babel/preset-flow": "^7.0.0", # flow 支持
"@babel/preset-react": "^7.0.0", # react 支持
"autoprefixer": "^9.1.5", # css 自動添加廠家前綴 -webkit-, -moz-
"babel-loader": "^8.0.4", # webpack 加載 js 的 loader
"babel-plugin-component": "^1.1.1", # 若是使用 element ui，須要用到這個
"babel-plugin-flow-runtime": "^0.17.0", # flow-runtime 支持
"babel-plugin-import": "^1.9.1", # 若是使用 ant-design，須要用到這個
"browser-sync": "^2.24.7", # 瀏覽器實例組件，用於本地開發調試
"css-loader": "^1.0.0", # webpack 加載 css 的 loader
"chalk": "^2.4.1", # 讓命令行的信息有顏色
"file-loader": "^2.0.0", # webpack 加載靜態文件的 loader
"flow-runtime": "^0.17.0", # flow-runtime 包
"html-loader": "^0.5.5", # webpack 加載 html 的 loader
"html-webpack-include-assets-plugin": "^1.0.5", # 給 html 文件添加額外靜態文件連接的插件
"html-webpack-plugin": "^3.2.0", # 更方便操做 html 文件的插件
"less": "^3.8.1", # less 轉 css
"less-loader": "^4.1.0", # webpack 加載 less 的 loader
"mini-css-extract-plugin": "^0.4.3", # 提取 css 單獨打包
"minimist": "^1.2.0", # process.argv 更便捷處理
"node-sass": "^4.9.3", # scss 轉 css
"optimize-css-assets-webpack-plugin": "^5.0.1", # 優化 css 打包，包括壓縮
"postcss-loader": "^3.0.0", # 對 css 進行更多操做，好比添加廠家前綴
"sass-loader": "^7.1.0", # webpack 加載 scss 的 loader
"style-loader": "^0.23.0", # webpack 加載 style 的 loader
"uglifyjs-webpack-plugin": "^2.0.1", # 壓縮 js 的插件
"url-loader": "^1.1.1", # file-loader 的升級版
"vue-loader": "^15.4.2", # webpack 加載 vue 的 loader
"vue-template-compiler": "^2.5.17", # 配合 vue-loader 使用的
"webpack": "^4.20.2", # webpack 模塊
"webpack-bundle-analyzer": "^3.0.2", # 分析當前打包各個模塊的大小，決定哪些須要單獨打包
"webpack-dev-middleware": "^3.4.0", # webpack-dev-server 中間件
"webpack-hot-middleware": "^2.24.2" # 熱更新中間件
}
2.3 基本命令
# package.json
"scripts": {
"dev": "node dev.js",
"build": "node build.js",
"analyze": "node analyze.js",
}
npm run dev # 開發 npm run build # 構建 npm run analyze # 模塊分析
若是須要支持多入口構建，在命令後面添加參數：react
npm run dev -- home # 開發 home 頁面 npm run analyze -- explore # 模塊分析 explore 頁面 # 構建多個頁面 npm run build -- home explore about/* about/all --env test/prod
-
home, explore肯定構建的頁面；about/*, about/all指about目錄下全部的頁面；all, *整個項目全部的頁面 - 有時候可能還會針對不一樣的服務器環境（好比測試機、正式機）作出不一樣的構建，能夠在後面加參數
-
--用來分割npm自己的參數與腳本參數，參考 npm - run-script 瞭解詳情
2.4 dev.js 配置
開發通常用須要用到下面的組件：jquery
- webpack
- webpack-dev-server 或 webpack-dev-middleware
- webpack-hot-middleware
- HotModuleReplacementPlugin
- browser-sync
const minimist = require('minimist');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const devMiddleWare = require('webpack-dev-middleware');
const hotMiddleWare = require('webpack-hot-middleware');
const browserSync = require('browser-sync');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { HotModuleReplacementPlugin } = webpack;
const argv = minimist(process.argv.slice(2));
const page = argv._[0];
// 單頁面
const entryFile = `${__dirname}/src/index.js`;
// 多頁面
const entryFile = `${__dirname}/src/${page}/index.js`;
// 編譯器對象
const compiler = webpack({
entry: [
'webpack-hot-middleware/client?reload=true', // 熱重載須要
entryFile,
],
output: {
path: `${__dirname}/dev/`, // 打包到 dev 目錄
filename: 'index.js',
publicPath: '/dev/',
},
plugins: [
new HotModuleReplacementPlugin(), // 熱重載插件
new HtmlWebpackPlugin({ // 處理 html
// 單頁面
template: `${__dirname}/src/index.html`,
// 多頁面
template: `${__dirname}/src/${page}/index.html`,
}),
new VueLoaderPlugin(), // vue-loader 所需
],
module: {
rules: [
{ // js 文件加載器
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-syntax-dynamic-import',
],
},
test: /\.(js|jsx)$/,
},
{ // css 文件加載器
loader: 'style-loader!css-loader',
test: /\.css$/,
},
{ // less 文件加載器
loader: 'style-loader!css-loader!less-loader',
test: /\.less$/,
},
{ // scss 文件加載器
loader: 'style-loader!css-loader!sass-loader',
test: /\.(scss|sass)$/,
},
{ // 靜態文件加載器
loader: 'url-loader',
test: /\.(gif|jpg|png|woff|woff2|svg|eot|ttf|ico)$/,
options: {
limit: 1,
},
},
{ // html 文件加載器
loader: 'html-loader',
test: /\.html$/,
options: {
attrs: ['img:src', 'link:href'],
interpolate: 'require',
},
},
{ // vue 文件加載器
loader: 'vue-loader',
test: /\.vue$/,
},
],
},
resolve: {
alias: {}, // js 配置別名
modules: [`${__dirname}/src`, 'node_modules'], // 模塊尋址基路徑
extensions: ['.js', '.jsx', '.vue', '.json'], // 模塊尋址擴展名
},
devtool: 'eval-source-map', // sourcemap
mode: 'development', // 指定 webpack 爲開發模式
});
// browser-sync 配置
const browserSyncConfig = {
server: {
baseDir: `${__dirname}/`, // 靜態服務器基路徑，能夠訪問項目全部文件
},
startPath: '/dev/index.html', // 開啓服務器窗口時的默認地址
};
// 添加中間件
browserSyncConfig.middleware = [
devMiddleWare(compiler, {
stats: 'errors-only',
publicPath: '/dev/',
}),
hotMiddleWare(compiler),
];
browserSync.init(browserSyncConfig); // 初始化瀏覽器實例，開始調試開發
2.5 build.js 配置
構建過程當中，通常會有這些過程：webpack
- 提取樣式文件，單獨打包、壓縮、添加瀏覽器廠家前綴
- 對
js在產品模式下進行打包，並生成sourcemap文件 -
html-webpack-plugin自動把打包好的樣式文件與腳本文件引用到html文件中，並壓縮 - 對全部資源進行 hash 化處理（可選）
const minimist = require('minimist');
const webpack = require('webpack');
const chalk = require('chalk');
const autoprefixer = require('autoprefixer');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {yellow, red} = chalk;
const argv = minimist(process.argv.slice(2));
const pages = argv._; // ['home', 'explore', 'about/*', 'about/all']
const allPages = getAllPages(pages); // 根據 page 中的 `*, all` 等關鍵字，獲取全部真正的 pages
// 單頁面，只有一個入口，因此只有一個配置文件
const config = { ... };
// 多頁面，多個入口，全部有多個配置文件
const configs = allPages.map(page => ({
// 單頁面
entry: `${__dirname}/src/index.js`, // js 入口文件
// 多頁面
entry: `${__dirname}/src/${page}/index.js`, // js 入口文件
output: {
path: `${__dirname}/dist/`, // 輸出路徑
filename: '[chunkhash].js', // 輸出文件名，這裏徹底取 hash 值來命名
hashDigestLength: 32, // hash 值長度
publicPath: '/dist/',
},
plugins: [
new MiniCssExtractPlugin({ // 提取全部的樣式文件，單獨打包
filename: '[chunkhash].css', // 輸出文件名，這裏徹底取 hash 值來命名
}),
new HtmlWebpackPlugin({
// 單頁面
template: `${__dirname}/src/index.html`, // html 入口文件
// 多頁面
template: `${__dirname}/src/${page}/index.html`,// html 入口文件
minify: { // 指定若是壓縮 html 文件
removeComments: !0,
collapseWhitespace: !0,
collapseBooleanAttributes: !0,
removeEmptyAttributes: !0,
removeScriptTypeAttributes: !0,
removeStyleLinkTypeAttributes: !0,
minifyJS: !0,
minifyCSS: !0,
},
}),
new VueLoaderPlugin(), // vue-loader 所需
new OptimizeCssAssetsPlugin({ // 壓縮 css
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
}),
// webpack 打包的 js 文件是默認壓縮的，因此這裏不須要再額外添加 uglifyjs-webpack-plugin
],
module: {
rules: [
{ // js 文件加載器，與 dev 一致
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-syntax-dynamic-import',
],
},
test: /\.(js|jsx)$/,
},
{ // css 文件加載器，添加了瀏覽器廠家前綴
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: [
'> 1%',
'last 2 versions',
'Android >= 3.2',
'Firefox >= 20',
'iOS 7',
],
}),
],
},
},
],
test: /\.css$/,
},
{ // less 文件加載器，添加了瀏覽器廠家前綴
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: [
'> 1%',
'last 2 versions',
'Android >= 3.2',
'Firefox >= 20',
'iOS 7',
],
}),
],
},
},
'less-loader',
],
test: /\.less$/,
},
{ // scss 文件加載器，添加了瀏覽器廠家前綴
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: [
'> 1%',
'last 2 versions',
'Android >= 3.2',
'Firefox >= 20',
'iOS 7',
],
}),
],
},
},
'sass-loader',
],
test: /\.(scss|sass)$/,
},
{ // 靜態文件加載器，與 dev 一致
loader: 'url-loader',
test: /\.(gif|jpg|png|woff|woff2|svg|eot|ttf|ico)$/,
options: {
limit: 1,
},
},
{ // html 文件加載器，與 dev 一致
loader: 'html-loader',
test: /\.html$/,
options: {
attrs: ['img:src', 'link:href'],
interpolate: 'require',
},
},
{ // vue 文件加載器，與 dev 一致
loader: 'vue-loader',
test: /\.vue$/,
},
],
},
resolve: {
alias: {}, // js 配置別名
modules: [`${__dirname}/src`, 'node_modules'], // 模塊尋址基路徑
extensions: ['.js', '.jsx', '.vue', '.json'], // 模塊尋址擴展名
},
devtool: 'source-map', // sourcemap
mode: 'production', // 指定 webpack 爲產品模式
}));
// 執行一次 webpack 構建
const run = (config, cb) => {
webpack(config, (err, stats) => {
if (err) {
console.error(red(err.stack || err));
if (err.details) {
console.error(red(err.details));
}
process.exit(1);
}
const info = stats.toJson();
if (stats.hasErrors()) {
info.errors.forEach(error => {
console.error(red(error));
});
process.exit(1);
}
if (stats.hasWarnings()) {
info.warnings.forEach(warning => {
console.warn(yellow(warning));
});
}
// 若是是多頁面，須要把 index.html => `${page}.html`
// 由於每一個頁面導出的 html 文件都是 index.html 若是不從新命名，會被覆蓋掉
if(cb) cb();
});
};
// 單頁面
run(config);
// 多頁面
let index = 0;
// go on
const goon = () => {
run(configs[index], () => {
index += 1;
if (index < configs.length) goon();
});
};
goon();
2.6 analyze.js 配置
const minimist = require('minimist');
const chalk = require('chalk');
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const {yellow, red} = chalk;
const argv = minimist(process.argv.slice(2));
const page = argv._[0];
// 單頁面
const entryFile = `${__dirname}/src/index.js`;
// 多頁面
const entryFile = `${__dirname}/src/${page}/index.js`;
const config = {
entry: entryFile,
output: {
path: `${__dirname}/analyze/`, // 打包到 analyze 目錄
filename: 'index.js',
},
plugins: [
new VueLoaderPlugin(), // vue-loader 所需
new BundleAnalyzerPlugin(), // 添加插件
],
module: {
rules: [
{ // js 文件加載器
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'@babel/plugin-transform-react-jsx',
'@babel/plugin-syntax-dynamic-import',
],
},
test: /\.(js|jsx)$/,
},
{ // css 文件加載器
loader: 'style-loader!css-loader',
test: /\.css$/,
},
{ // less 文件加載器
loader: 'style-loader!css-loader!less-loader',
test: /\.less$/,
},
{ // scss 文件加載器
loader: 'style-loader!css-loader!sass-loader',
test: /\.(scss|sass)$/,
},
{ // 靜態文件加載器
loader: 'url-loader',
test: /\.(gif|jpg|png|woff|woff2|svg|eot|ttf|ico)$/,
options: {
limit: 1,
},
},
{ // html 文件加載器
loader: 'html-loader',
test: /\.html$/,
options: {
attrs: ['img:src', 'link:href'],
interpolate: 'require',
},
},
{ // vue 文件加載器
loader: 'vue-loader',
test: /\.vue$/,
},
],
},
resolve: {
alias: {}, // js 配置別名
modules: [`${__dirname}/src`, 'node_modules'], // 模塊尋址基路徑
extensions: ['.js', '.jsx', '.vue', '.json'], // 模塊尋址擴展名
},
mode: 'production', // 指定 webpack 爲產品模式
};
webpack(config, (err, stats) => {
if (err) {
console.error(red(err.stack || err));
if (err.details) {
console.error(red(err.details));
}
process.exit(1);
}
const info = stats.toJson();
if (stats.hasErrors()) {
info.errors.forEach(error => {
console.error(red(error));
});
process.exit(1);
}
if (stats.hasWarnings()) {
info.warnings.forEach(warning => {
console.warn(yellow(warning));
});
}
});
2.7 擴展配置
你能夠根據須要擴展配置，好比添加插件、加載器等，好比：git
- provide-plugin 能夠提供一些全局模塊的導出，好比
jquery - define-plugin 能夠動態定義一些全局變量
- css-loader 能夠配置成 css-modules
- 若是某個頁面導出
js bundle很大，想分割成多個文件，可使用 dll-plugin、split-chunks-plugin - 若是想在命令行顯示構建的進度，可使用 progress-plugin
3. 封裝
上面的代碼能夠封裝成一個全局命令，好比 lila，運行上面的命令就能夠更簡潔：es6
lila dev home # 開發 home 頁面 lila analyze explore # 模塊分析 explore 頁面 # 構建多個頁面 lila build home explore about/* about/all --env test/prod
後續
更多博客，查看 https://github.com/senntyou/blogs
版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）
相關文章
- 1. 通用、封裝、簡化 webpack 配置
- 2. 通用路由封裝（GRE）×××配置
- 3. webpack使用配置優化
- 4. webpack封裝bootstrap
- 5. webpack 簡單配置
- 6. 優化webpack配置
- 7. webpack安裝和簡單配置
- 8. 極簡axios配置項(二次封裝)
- 9. Log4j簡單封裝及配置
- 10. 安裝，配置webpack.
- 更多相關文章...
- • Git 安裝配置 - Git 教程
- • C# 封裝 - C#教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 通用、封裝、簡化 webpack 配置
- 2. 通用路由封裝（GRE）×××配置
- 3. webpack使用配置優化
- 4. webpack封裝bootstrap
- 5. webpack 簡單配置
- 6. 優化webpack配置
- 7. webpack安裝和簡單配置
- 8. 極簡axios配置項(二次封裝)
- 9. Log4j簡單封裝及配置
- 10. 安裝，配置webpack.