webpack--基於vue-cli搭建一個多項目使用的工程

時間 2020-04-17

標籤 webpack 基於 vue cli 搭建一個項目使用工程简体版

原文原文鏈接

這個博文內容是基於vue-cli搭建一個多項目使用的工程（webpack版本3x）, 可讓多個項目用同一個組件。實現一個工程對特定的項目運行開發環境和打包環境html

純小白教程，若是你和我同樣都不懂webpack，那就進來吧vue

.babelrc
node_modules
package.json
...
components
項目1 (VUE Admin)
    dist
    src
        components
        page
        router
        main.js
        ...
    static
    index.html
項目2(React PC)
    dist
    src
        components
        page
        router
        main.txs
        ...
    static
    index.html
    tsconfig.json
複製代碼

入口

package.json 既然咱們用了多項目，那麼打包和開發必定會和以前不同，命令確定會加一個項目指定，修改package.json,找到scriptswebpack

把dev和build改爲以下格式（admin是項目名字，根據本身的業務處理哦）nginx

"admin-dev": "node build/dev-server.js admin",
"admin-build": "node build/build.js admin",
複製代碼

開發環境設置

能夠看到咱們執行admin-dev的時候，會執行node build/dev-server.js admingit

在修改執行的時候，後面加了一個參數，這個參數咱們須要解析，nodejs解析的話，就是用process.argv(詳細介紹), 咱們先獲取那個參數, 而後保存到config/index.js裏面，以後要用到github

config/index.js

var projects_root_dir = process.argv[2]
複製代碼

修改buildweb

index: path.resolve(__dirname, `../${projects_root_dir}/dist/index.html`),
assetsRoot: path.resolve(__dirname, `../${projects_root_dir}/dist`),
複製代碼

修改devvue-cli

assetsPublicPath: '/', 
複製代碼

dev-server.js

而後打開dev-server.js看看裏面都是怎麼玩的，順便修改一下

// ...
// 上面代碼省略, 只看這部分核心和要改的代碼
// ...
// 這個就是頁面輸出到開發環境的東西
var devMiddleware = require("webpack-dev-middleware")(compiler, {
    // 這個刪掉
    // publicPath: webpackConfig.output.publicPath,
    // 改爲這個
    publicPath: '/',
    quiet: true,
})
// 這個是代理static靜態文件的，用的是express框架
app.use(staticPath, express.static(`./${config.projects_root_dir}/static`));
複製代碼

要了解更多，點擊進入webpack-dev-middleware的傳送門

webpack.base.conf.js

修改entry

// 這個是入口文件，也就是執行nodejs代碼後決定要從哪裏入手編譯，咱們在前面添加一個config.projects_root_dir，這個就是nodejs後面的參數
entry: {
        app: `./${config.projects_root_dir}/src/main.js`
},
複製代碼

修改resolve函數

// 這個函數在alias裏面會用到，也就是import的時候，前面加的那個東西。

// 刪掉這個
// return path.join(__dirname, dir)
// 替換成
var resolve_path = path.join(
        __dirname,
        "../" + config.projects_root_dir,
        dir
);
複製代碼

修改rules

// 在test: /\.vue$/,這裏添加一個
// include: [path.join(__dirname, '../')]
// 以下
{
        test: /\.vue$/,
        loader: "vue-loader",
        options: vueLoaderConfig,
        include: [path.join(__dirname, '../')]
}
// 這個include不要改爲resolve("src"),由於公共項目，其餘地方也須要編譯的
複製代碼

build/utils.js

這裏文件裏面可能會有less等須要編譯，咱們找到resources,而後在path.resolve這個函數第二個位置添加'../' + config.projects_root_dir 以下

resources: [path.resolve(__dirname, '../' + config.projects_root_dir, config.less_resources)]
複製代碼

到這裏的話開發環境就搭建好了。 npm run admin-dev就能夠運行起來了。（若是沒有意外的話）。

效果

完美運行

打包環境設置

webpack.prod.conf.js

HtmlWebpackPlugin修改下面代碼

// 修改爲以下，這個地方是決定把html文件弄到哪裏去
template: `${config.projects_root_dir}/index.html`,
複製代碼

CopyWebpackPlugin修改以下

// 這個是決定從哪裏開始複製文件，to不須要改變（若是業務須要那就改變）
from: path.resolve(__dirname, `../${config.projects_root_dir}/static`),
複製代碼

完美打包

而後用nginx代理本地測試下(完美跑起來)

配置別名，引用項目外的組件

// .. 先後代碼不展現哈
function private_resolve() {
    var privete_page_resolve_path = path.join(__dirname, "../components", "");
    return privete_page_resolve_path;
}
// .. 先後代碼不展現哈
module.exports = {
    // .. 先後代碼不展現哈
    alias: {
        "@": resolve("src"),
        "p~": private_resolve()
    }
}
複製代碼

而後全部項目均可以引入啦。

import test 'p~/test'
複製代碼

其餘

若是怕麻煩，也能夠npm link建立軟連接。
而後配合私有npm，使用verdaccio搭建私有npm，傳送門

加一個React項目

上面創建了一個叫admin的項目。咱們如今在旁邊加一個react（使用tsx）的項目。名字，咱們取叫PC

package.json腳本里面添加以下屬性

"pc-dev": "node build/dev-server.js pc 3035 main.tsx",
"pc-build": "node build/build.js pc",
複製代碼

發現對比以前的，咱們後面加了3035端口和main.tsx。這是由於端口一致的話會沒法啓動多個項目，因而自定義端口。而main.tsx是由於啓動的入口發生了變化, 由於咱們React項目用main.js做爲入口不太合適了。

修改config/index.js

// ---設置端口和入口---

// 設置默認值
const default_port = 7080
const default_main_filename = 'main.js'

var projects_root_dir = process.argv[2]
var projects_port = process.argv[3] || default_port
var projects_main_filename = process.argv[4] || default_main_filename

// --- 而後修改下面兩個地方
module.exports = {
    projects_root_dir,
    // 新增
    projects_main_filename,
    ...CODE
    dev: {
        ... CODE
        // 修改
        port: projects_port,
        ... CODE
    }
    ...CODE
}
複製代碼

屬性設置好了，修改入口和添加擴展名（能夠不加，可是建議），和tsx（若是不用ts就加jsx）。打開webpack.base.conf.js修改便可

...
// 修改入口
entry: {
    app: `./${config.projects_root_dir}/src/${config.projects_main_filename}`
}
...
// 添加擴展
extensions: [".js", ".vue", ".json", ".jsx", '.ts' , '.tsx']
...
// 添加tsx的解析
// 須要在前面加const tsImportPluginFactory = require('ts-import-plugin') 引入哦。 
// npm run install ts-import-plugin --save-dev
{
    test: /\.tsx?$/,
    loader: 'ts-loader',
    options: {
        transpileOnly: true,
        getCustomTransformers: () => ({
          before: [ tsImportPluginFactory( /** options */) ]
        }),
        compilerOptions: {
          module: 'es2015'
        }
    },
    exclude: /node_modules/,
    include: [resolve("src"), private_resolve()]
},
...
複製代碼