摘要：主要做了兩套方案，一套是基于的單頁(yè)應(yīng)用，還有一套就是多頁(yè)應(yīng)用。麻煩的是原先使用這個(gè)方案。這太麻煩了，還不如使用一步到位。后記暫時(shí)只做了這些，這套工具還沒(méi)有正式投入使用估計(jì)會(huì)有挺多問(wèn)題的。

不想看下面廢話的，可以直接看這里。

這兩周負(fù)責(zé)公司前端基礎(chǔ)工程的建設(shè)。主要做了兩套方案，一套是基于vue的單頁(yè)應(yīng)用，還有一套就是多頁(yè)應(yīng)用。對(duì)于vue單頁(yè)這塊是沒(méi)什么問(wèn)題的，直接用vue-cli生成項(xiàng)目，再懟上vue全家桶以及一些工具函數(shù)，然后規(guī)范一下目錄結(jié)構(gòu)啥的基本就ok了。

麻煩的是原先使用 gulp+require.js 這個(gè)方案。這個(gè)在我來(lái)公司之前就已經(jīng)存在，當(dāng)初我剛來(lái)的時(shí)候使用的是 grunt+require.js+jQuery(zepto)+sass ，然后我用這個(gè)第一次寫項(xiàng)目時(shí)，實(shí)在受不了了 grunt 的緩慢，就換成了 gulp 。這次對(duì)于這個(gè)方案我本來(lái)也只是想小改一下，因?yàn)檫@個(gè)方案用著還行，我就想加個(gè) ES6 把 require.js 干掉，然后還有些其他小問(wèn)題的修復(fù)就好了。

然后按照想法開始給 gulp 任務(wù)里加上 babel 處理 ES6 。然后運(yùn)行，發(fā)現(xiàn)如果使用了ES6中的 module，通過(guò) import、export 進(jìn)行模塊化開發(fā)，那么通過(guò)babel轉(zhuǎn)碼后，import、export會(huì)被轉(zhuǎn)成符合CMD規(guī)范的 require 和 exports 等，但是瀏覽器還是跑不了，這時(shí)還需要 bowserify 、webpack 、rollup 之類的對(duì)代碼再次進(jìn)行構(gòu)建。這太麻煩了，還不如使用 webpack 一步到位。嗯還是不能偷懶啊。

├── build # webpack處理目錄
│   ├── build.js
│   ├── config.js
│   ├── run-env.js
│   ├── utils.js
│   ├── webpack.config.base.js
│   ├── webpack.config.dev.js
│   └── webpack.config.prod.js
├── dist # 打包之后的文件目錄
│   ├── commons.bundle.js
│   ├── css
│   │   ├── index.eb8584e93d4fbcbec235.css
│   │   └── test.eb8584e93d4fbcbec235.css
│   ├── img
│   │   └── test.d7a9b40f5bed4003db2585ba1bf24d86.jpg
│   ├── index.html
│   ├── js
│   │   ├── index.bundle.eb8584e93d4fbcbec235.js
│   │   └── test.bundle.eb8584e93d4fbcbec235.js
│   └── test.html
├── src # 源文件
│   ├── css
│   │   ├── base.scss
│   │   ├── index.scss
│   │   ├── test.scss
│   │   └── var.scss
│   ├── html
│   │   ├── index.html
│   │   └── test.html
│   ├── img
│   │   └── test.jpg
│   └── js
│       ├── app
│       │   ├── index.js
│       │   └── test.js
│       ├── base
│       └── component
├── webpack.config.js # webpack入口

先看下package.json里的命令和依賴

script:

"scripts": {
        "init-page": "node ./init-page.js",
        "dev": "export NODE_ENV=development && webpack-dev-server --open",
        "build": "export NODE_ENV=production && node ./build/build.js"
    }

依賴：

"devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.0",
        "clean-webpack-plugin": "^0.1.17",
        "css-loader": "^0.28.7",
        "eslint": "^4.10.0",
        "eslint-config-standard": "^10.2.1",
        "eslint-plugin-html": "^3.2.2",
        "eslint-plugin-import": "^2.8.0",
        "eslint-plugin-node": "^5.2.1",
        "eslint-plugin-promise": "^3.6.0",
        "eslint-plugin-standard": "^3.0.1",
        "exports-loader": "^0.6.4",
        "extract-text-webpack-plugin": "^3.0.1",
        "file-loader": "^1.1.5",
        "html-webpack-plugin": "^2.30.1",
        "html-withimg-loader": "^0.1.16",
        "node-sass": "^4.5.3",
        "postcss-loader": "^2.0.7",
        "preprocess-loader": "^0.2.2",
        "sass-loader": "^6.0.6",
        "script-loader": "^0.7.2",
        "style-loader": "^0.19.0",
        "url-loader": "^0.6.2",
        "webpack": "^3.7.1",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0"
    }

webpack的入口文件是 webpack.config.js ，在這個(gè)文件中就是根據(jù)命令執(zhí)行相應(yīng)的 webpack 配置：

const env = process.env.NODE_ENV === "production" ? "prod" : "dev";
// 根據(jù)環(huán)境執(zhí)行指定文件
module.exports = require(`./build/webpack.config.${env}.js`);

在webpack.base.config.js 中就是webpack的一些常規(guī)處理包括loader以及一些文件清理啥的。由于要配置的是多頁(yè)應(yīng)用所以對(duì)于入口文件的處理，這也是比較麻煩的一點(diǎn)。對(duì)于多入口文件的處理使用html-webpack-plugin這個(gè)插件。
在使用之前需要先獲取所有的html文件名稱，這個(gè)我是使用 node 的 fs 以及 path api 來(lái)獲取的：

/*獲取html文件名*/
module.exports = {
    getFileNameList(path) {
        let fileList = [];
        let dirList = fs.readdirSync(path);
        dirList.forEach(item => {
            if (item.indexOf("html") > -1) {
                fileList.push(item.split(".")[0]);
            }
        });
        return fileList;
    }
};

然后再處理webpack入口以及 html plugin:

// 入口html數(shù)組
let HTMLDirs = utils.getFileNameList("./src/html");

let HTMLPlugins = [];

// 入口文件集合處理
let entries = {};
HTMLDirs.forEach(page => {
    const htmlPlugin = new HTMLWebpackPlugin({
        filename: `${page}.html`,
        template: path.resolve(__dirname, `../src/html/${page}.html`),
        chunks: [page, "commons"]
    });
    HTMLPlugins.push(htmlPlugin);
    entries[page] = path.resolve(__dirname, `../src/js/app/${page}.js`);
});

相關(guān)webpack配置，具體配置見(jiàn)github

// webpack配置
module.exports = {
    entry: entries,
    ...
    plugins: [
        // 自動(dòng)生成 HTML 插件
        ...HTMLPlugins
    ]
};

最復(fù)雜的麻煩的都在base中干完了，本地開發(fā)和打包build只要做一些簡(jiǎn)單的處理就ok了

本地與線上的配置文件，需要先合并 base 里的配置（使用 webpack-merge 可以處理這個(gè)工作），然后做一下簡(jiǎn)單處理即可。

// dev
module.exports = webpackMerge(webpackBase, {
    devServer: {
        contentBase: config.devServerOutputPath,
        overlay: {
            errors: true,
            warnings: true
        }
    }
});

// prod
module.exports = webpackMerge(webpackBase, {
    devtool: false,
    plugins: [
        // 代碼壓縮
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        // 提取公共 JavaScript 代碼
        new webpack.optimize.CommonsChunkPlugin({
            // chunk 名為 commons
            name: "commons",
            filename: "[name].bundle.js"
        })
    ]
});

在處理zepto之類的未模塊化的庫(kù)的時(shí)候我采取的方案是cdn加載，然后webpack配置里加上外部擴(kuò)展即可
（externals 可以防止將某些 import 的包(package)打包到 bundle 中，而是在運(yùn)行時(shí)(runtime)再去從外部獲取這些擴(kuò)展依賴(external dependencies)）

externals: {
    "zepto": "$"
}

之前這套方案是要做三端的H5以及嵌入android、ios的webview，所以需要根據(jù)平臺(tái)做一些特殊處理。gulp里有gulp-preprocess可以比較好的處理，在webpack中可以使用 preprocess-loader 來(lái)處理。

{
    test: /.(html|js|css|scss)$/,
    loader: `preprocess-loader?${runEnv}`
}

暫時(shí)只做了這些，這套工具還沒(méi)有正式投入使用估計(jì)會(huì)有挺多問(wèn)題的。后續(xù)有問(wèn)題會(huì)繼續(xù)補(bǔ)充

感謝您的閱讀，本文由趙的拇指版權(quán)所有。原文地址： https://www.zhaofinger.com/detail/11