基於webpack4.x專案實戰2 - 配置一次,多個專案執行

鹹魚老弟發表於2019-04-05

不久前，寫過一篇webpack4的簡單實踐，

今天我們繼續來webpack4.x的實戰第二部分，只需要配置一次，就可以多個專案一起使用。

使用場景：

非外包專案,因為外包專案一般只有一個產品
我們的專案都使用vue或者react，統一一個框架，本文基於vue
我們不想每次開發一個專案都複製貼上一個webpack配置，而且希望只配置一次，每個專案都可以通用
我們可以引用公共專案的程式碼，所有專案共享。
可以自定義個別專案的webpack配置，靈活配置

一些目錄結構

在這裡，我們有一個約定：

單頁面，頁面名稱都為index.html
入口檔案都為該專案src下的main.js
一些靜態檔案，也就是我們不想打包的檔案，如一些配置等，放在和index.html同級目錄下的static目錄中
打包後的檔案放在dist目錄下

我們的目錄結構如下：

--_webpack
  --lib/cmd.js
  --dev-server.js
  --webpack.base.conf.js
  --webpack.dev.conf.js
  --webpack.prod.conf.js
--common
--demo1
  --src
    --main.js
  --index.html
--demo2
複製程式碼

_webpack：用來存放webpack、node的一些配置檔案，主要用來打包編譯
common：用來存放我們的一些公共檔案，比如一些常用的工具指令碼，常用元件等等
demo1/demo2：就是我們開發專案的目錄

開發環境：

我們執行npm run dev --dirname=產品名，

如npm run dev --dirname=demo來進行開發，如需指定埠，可以為npm run dev --dirname=demo1 --port=8080

生產環境：

我們執行npm run build --dirname=產品名，

如npm run build --dirname=demo1來進行打包編譯

程式碼解析

命令指令碼`_webpack/lib/cmd.js`

'use strict';
const program = require('commander');
const fs = require('fs');
const path = require('path');

let argv;
try {
  // 通過 npm run dev 的方法執行的時候，引數更換獲取方式
  argv = JSON.parse(process.env.npm_config_argv).original;
}	catch (e) {
  argv = process.argv;
}

program
    .version('0.1.0')
    .option('-d, --dirname <dirname>', '編譯目錄')
    .option('-p, --port <n>', '埠號')
    .parse(argv);

const dirname = program.dirname;

if(!fs.existsSync(path.resolve(__dirname, `../../${dirname}`))) {
    throw `${dirname}專案不存在`
}

module.exports = program;

複製程式碼

我們引入了commander這個庫來接收一些命令，比如產品名--dirname=xxx(也可以為-d xxx)、埠號--port=xxx，這樣，我們就可以通過在命令列接受我們的一些定製的命令了，如果沒有找到你輸入的產品名，直接丟擲異常。

注意點：如果想通過在package.json中設定來接受我們的命令，則下面這一段是必須的

try {
  // 通過 npm run dev 的方法執行的時候，引數更換獲取方式
  argv = JSON.parse(process.env.npm_config_argv).original;
}	catch (e) {
  argv = process.argv;
}
複製程式碼

這樣，我們就可以通過npm run dev --dirname=xxx --port=xxx來執行我們的命令了

基礎webpack配置 `_webpack/webpack.base.conf.js`

入口檔案

...
let entryFilePath = path.resolve(cwd, `${dirname}/src/main.js`);
if (!fs.existsSync(entryFilePath)) {
    entryFilePath = path.resolve(cwd, 'common/src/main.js');
}
return {

    entry: {
        lib: ['vue', 'vuex'],
        main: ['webpack-hot-middleware/client?noInfo=true&reload=true', entryFilePath]
    }, // 入口檔案

    output: {
        filename: 'js/[name].js',    // 打包後的檔名稱
        path: path.resolve(cwd, `${dirname}/dist`)  // 打包後的目錄
    }
    ...
}
複製程式碼

我們將vue、vuex這些單獨打包，入口檔案為我們的main.js,如果專案下沒有這個檔案，則去尋找common下的main.js,打包後為lib.js和main.js，放在dist目錄下。

一些loader

const fs = require('fs');
const path = require('path');
const webpack = require('webpack')
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 devMode = process.env.NODE_ENV == 'development'; // 是否是開發環境
...
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        },
        {
            test: /\.(le|c)ss$/,
            use: [
                devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader',
                'less-loader'
            ],
        },
        {
            test: /\.(png|svg|jpg|gif)$/, // 載入圖片
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192,  // 小於8k的圖片自動轉成base64格式
                    name: 'images/[name].[ext]?[hash]', // 圖片打包後的目錄
                    publicPath: '../'  // css圖片引用地址
                },
            }]
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/, // 載入字型檔案
            use: [
                'file-loader'
            ]
        },
        // 轉義es6
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: /src/,          // 只轉化src目錄下的js
            exclude: /node_modules/, // 忽略掉node_modules下的js
        }
    ]
},
...
複製程式碼

支援vue

由於專案基於Vue，所以需要vue-loader
支援CSS
1. 加入css-loader、less-loader(如果你們專案是用scss,也可以引入scss-loader)
2. 支援自動加css3字首
引入了postcss-loader，需要和autoprefixer一起使用。在根目錄下新建./postcss.config.js檔案，裡面的內容為

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
複製程式碼

package.json中需要這樣寫

"browserslist": [
    "> 1%", // 值越小，支援的瀏覽器返回更廣
    "last 2 versions",
    "not ie <= 8"
],
複製程式碼

支援圖片

引入url-loader來載入圖片，打包後的圖片放在images資料夾中，在引用圖片時，自動加入hash值
支援es6

引入babel-loader
CSS優化

引入mini-css-extract-plugin這個外掛對生產環境的CSS進行優化，這裡需要注意的是，webpack4.x建議用mini-css-extract-plugin替換extract-text-webpack-plugin

resolve

resolve: {
    // 建立import別名
    alias: {
        $common: path.resolve(cwd, 'common/src'),
        $components: path.resolve(cwd, `${dirname}/src/components`),
        'vue$': 'vue/dist/vue.esm.js',
    },
    extensions: ['.js', '.json'], // 忽略檔案字尾
    modules: [  
        // 引入模組的話，先從node_modules中查詢，其次是當前產品的src下，最後是common的src下
        path.resolve(cwd, 'node_modules'),
        path.resolve(cwd, `${dirname}/src`),
        path.resolve(cwd, 'common/src')
    ]
},
複製程式碼

resolve中，我們建立了一些別名。支援Vue必須引入的vue$。省略掉js和json的字尾等等
modules這裡就比較好玩了

如果我們在程式碼中import dialog from utils/dialog.vue,它會先去node_modules下查詢，如果沒找到，則去當前專案下的src查詢，如果還是沒有，則去common下的src去查詢,這樣有什麼好處呢?

如果我們的common目錄下有一個dialog.vue檔案,如：common/src/utils/dialog.vue 在我們的專案中，如：專案A，引用這個dialog.vue檔案，是可以直接import dialog from utils/dialog.vue這樣引入的，即使我們的專案A裡面沒有utils/dialog.vue這個檔案。


--common
  --src
    -- utils/dialog.vue
--projectA
  --src
    -- utils/dialog.vue
    --main.js // import dialog from utils/dialog.vue  來自於自己目錄下
--projectB
  --src
    --main.js // import dialog from utils/dialog.vue 來自於common目錄下
複製程式碼

這樣，當我們的專案A、專案B中存在很多的公用程式碼，可以把公共程式碼放在common中，專案A或B中，只要寫少許程式碼，就可以完成一個專案，如果專案A中的dialog.vue比較特殊，則在專案A中新建同目錄下的dialog.vue檔案，即可覆蓋掉common的檔案,這樣import dialog from utils/dialog.vue就來自於專案A, 而不是common了。從而達到，即可通用，又可定製的效果。如果專案A中的dialog.vue檔案，只有一點點和common下的不同，則在dialog.vue中，繼承於common即可

外掛

...
plugins: [
    new VueLoaderPlugin(),
    new htmlWebpackPlugin({
        template: path.resolve(cwd, `${dirname}/index.html`),
        filename: "index.html",
        inject: true,
        hash: true,
        minify: {
            removeComments: devMode ? false : true, // 刪除html中的註釋程式碼
            collapseWhitespace: devMode ? false : true, // 刪除html中的空白符
            removeAttributeQuotes: devMode ? false : true // 刪除html元素中屬性的引號
        },
        chunksSortMode: 'dependency' // 按dependency的順序引入
    }),
    new MiniCssExtractPlugin({
        filename: 'css/[name].css',
        chunkFilename: '[id].css'
    }),

    // 優化css
    new OptimizeCssAssetsPlugin({ 
        ssetNameRegExp: /\.css\.*(?!.*map)/g,
        cssProcessor: require('cssnano'), // 引入cssnano配置壓縮選項
        cssProcessorOptions: { // 用postcss新增字首，這裡關掉
            autoprefixer: { 
                disable: true 
            },
            discardComments: {  // 移除註釋
                removeAll: true
            }
        },
        canPrint: true // 是否將外掛資訊列印到控制檯
    }),

    // 頁面不用每次都引入這些變數
    new webpack.ProvidePlugin({
        Vue: ['vue', 'default'],
        Vuex: ['vuex', 'default']
    })
]
...
複製程式碼

比較常用的一些外掛，壓縮css、js、html自動引入css、js等。上面就是我們webpack的基礎配置。

開發環境配置`_webpack/webpack.dev.conf.js`

'use strict'
const fs = require('fs');
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
module.exports = (cwd, dirname = null, outputPath = null) => {
    let baseWebpackConfig = require('./webpack.base.conf')(cwd, dirname, outputPath);
    return merge(baseWebpackConfig, {
        mode: 'development',
        devtool: '#cheap-module-eval-source-map',
        plugins: [
            new webpack.HotModuleReplacementPlugin(), // 用於熱載入
        ]
    });
    
}
複製程式碼

生產環境配置`_webpack/webpack.prod.conf.js`

'use strict'
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const fs = require('fs');

module.exports = (cwd, dirname = null, outputPath = null) => {
    let baseWebpackConfig = require('./webpack.base.conf')(cwd, dirname, outputPath);
    return merge(baseWebpackConfig, {
        devtool: false,
        mode: 'production',
        optimization: {
            minimize: true
        },
        plugins: [
            new CleanWebpackPlugin({
                default: ['dist'],
                verbose: true,
                dry: false
            }),
            // 複製靜態資源,將static檔案內的內容複製到指定資料夾
            new CopyWebpackPlugin([
                {
                    from: path.resolve(cwd, `${dirname}/static`),
                    to: path.resolve(cwd, `${dirname}/dist/static`),
                    ignore: ['.*'] // 忽視.*檔案
                }
            ]),
        ]
    });

}
複製程式碼

主要是壓縮js、複製一些靜態檔案等等

開發環境服務

開發環境服務`_webpack/dev-server.js`

我們用expess來做伺服器，如果你不想用公共的webpack.dev.conf.js,也可以在你的專案下新建webpack.dev.conf.js來自定義單獨專案下的配置

'use strict'
const path = require('path');
const commander = require('./lib/cmd');
const dirname = commander.dirname;
const port = commander.port || 3002; // 埠號
const cwd = path.resolve(__dirname, '../');
let devWebpackConf = require('./webpack.dev.conf.js');
let localWebpackConf = path.resolve(cwd, `${dirname}/webpack.dev.conf.js`);
if (fs.existsSync(localWebpackConf)) { // 如果專案下有webpack.dev.conf,則使用該配置，覆蓋掉公有的配置
    devWebpackConf = require(localWebpackConf);
}
const webpackConfig = devWebpackConf(cwd, dirname, null); // webpack的配置
...

// 設定一些靜態資源
const staticPath = path.resolve(cwd, `${dirname}/static`);
app.use('/static', express.static(staticPath));
...
複製程式碼

一些產品名，基本路徑都是從這裡傳入你的webpack配置裡面去。具體內容可以看dev-server.js

編譯服務

生產環境服務`_webpack/build.js`

'use strict'
const ora = require('ora'); // 終端顯示的轉輪loading
const rm = require('rimraf');
const path = require('path');
const chalk = require('chalk');
const commander = require('./lib/cmd');
const product = commander.dirname;
const cwd = path.resolve(__dirname, '../');
const webpack = require('webpack');

let proWebpackConf = require('./webpack.pro.conf.js');
let localWebpackConf = path.resolve(cwd, `${dirname}/webpack.pro.conf.js`);
if (fs.existsSync(localWebpackConf)) { // 如果專案下有webpack.dev.conf,則使用該配置，覆蓋掉公有的配置
    proWebpackConf = require(localWebpackConf);
}
const webpackConfig = proWebpackConf(cwd, dirname, null); // webpack的配置
const spinner = ora('building for production...')
spinner.start()

// 刪除已編譯檔案
rm(path.resolve(cwd, `${product}/dist`), err => {
  if (err) throw err

  // 在刪除完成的回撥函式中開始編譯
  webpack(webpackConfig, function (err, stats) {
    spinner.stop() // 停止loading
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    if (stats.hasErrors()) {
      console.log(chalk.red('Build failed with errors.\n'));
      process.exit(1);
    }

    console.log(chalk.cyan('Build complete.\n'));
  })
})

複製程式碼

如果不想用公用編譯，同理，也可以在獨自的專案下新建webpack.pro.conf.js來覆蓋掉公共的編譯配置

結尾

程式碼地址： github.com/xianyulaodi…

程式碼中有兩個demo：

demo1的webpack配置是定製的，它的入口可以為index.js,demo1也舉例了引用common檔案的情況

demo2基於vue,支援開發環境引入mock，打包後mock移除

這樣，我們就完成了我們的webpack配置，只需要配置一次，多個專案公用一套配置，如果common目錄下有你需要的元件，單獨專案下可以直接使用，支援單獨專案覆蓋掉公用元件以及覆蓋掉公用webpack配置，做到既公用，又解耦。尤其適用於專案A、B、C只有少部分功能有差異的情況。

基於webpack4.x專案實戰
2019-03-03
Web
基於webpack4.x專案實戰3 - 手寫一個cli
2019-04-28
Web
go語言實戰教程：專案檔案配置和專案初始化執行
2019-04-01
Go
Docker實戰之執行專案
2020-06-08
Docker
管理多個專案：專案管理真正的挑戰
2011-01-22
專案管理
基於Vue的多專案整合實踐
2017-10-15
Vue
vue多專案多模組執行/打包
2021-09-28
Vue
專案實戰（連載）：基於Angular2+Mongodb+Node技術實
2021-09-09
AngularMongoDB
基於 CNN 的驗證碼破解實戰專案
2020-04-06
CNN
mysql一次執行多個SQL檔案
2020-11-14
MySql
webpack4.X 實戰（二）：從0開始搭建一個簡單的前端專案
2019-02-26
Web前端
python十個實戰專案
2012-02-12
Python
Nginx 多 Laravel 專案配置
2019-01-15
NginxLaravel
IDEA配置Maven執行一個簡單的專案
2022-07-18
IdeaMaven
struts2_專案執行報404
2018-11-07
vue2.x+vuex+TS專案實戰基礎篇
2020-12-01
Vue
dubbo專案實戰
2019-04-08
HarmonyOS 實戰專案
2023-11-16
Java配置17-配置Nginx代理多個前端專案
2018-11-01
JavaNginx前端
webpack實戰（一）：真實專案中一個完整的webpack配置
2019-03-04
Web
基於Struts的第一個專案
2009-08-12
Android專案實戰之高仿網易雲音樂建立專案和配置
2018-07-05
Android
整理了 40 多套 Java 完整實戰專案，各個精品！
2021-12-28
Java
多頁專案的webpack配置
2018-07-21
Web
執行專案管理的最佳實踐
2008-07-09
專案管理
專案管理基礎與實踐（2）
2005-05-13
專案管理
vue專案通過命令列傳參實現多環境配置(基於@vue/cli)
2019-03-04
Vue命令列
李寧公司專案管理助益戰略執行（轉）
2007-08-09
專案管理
一個基於nuxt+iview-admin+koa2 的專案
2018-06-22
UXView
如何執行vue專案
2018-11-02
Vue
A專案軼事之加入專案2個月
2019-04-26
專案管理軟體有哪些？多個行業專案管理軟體大全
2022-07-07
專案管理行業
外掛化之VirtualApk實戰一：專案配置
2018-12-12
APK
iOS專案開發實戰——配置自定義動畫
2015-08-19
iOS動畫
python實戰專案
2021-08-23
Python
TypeScript + 大型專案實戰
2018-07-22
TypeScript
AMP專案實戰分享
2018-03-20
基於Abp React前端的專案建立與執行——React框架分析
2021-01-27
React前端框架

基於webpack4.x專案實戰2 - 配置一次,多個專案執行

使用場景：

一些目錄結構

程式碼解析

命令指令碼_webpack/lib/cmd.js

基礎webpack配置 _webpack/webpack.base.conf.js

開發環境配置_webpack/webpack.dev.conf.js

生產環境配置_webpack/webpack.prod.conf.js