If you don’t want to read this crap, you can read it right here.

preface

In these two weeks, I was responsible for the construction of the company’s front-end foundation engineering. Two sets of schemes are mainly made, one is a single page application based on VUE, and another is a multi-page application. For vue single page this is no problem, directly use vuE-CLI generate project, then on vue family bucket and some tool functions, and then standardize the directory structure what the basic OK.

The trouble is that the original gulp+require.js scheme was used. Js +jQuery(zepto)+sass. When I first started working on this project, I got fed up with the slowness of Grunt and switched to gulp. This time I was only going to make a minor change to this solution, because it works fine, I just want to add an ES6 to kill require.js, and then fix some other minor issues.

Then start with the idea of adding Babel to gulp tasks to handle ES6. If you use ES6 module and use import and export for modular development, import and export will be converted to require and exports in line with CMD specification after transcoding through Babel, but the browser still cannot run it. You’ll need bowserify, Webpack, rollup, and the like to build the code again. This is too much hassle, so you might as well use WebPack. Well, still can’t be lazy.

The project structure

├─ Build # WebPack │ ├─ build.js │ ├─ config.js │ ├─ run-env.js │ ├─ webpack.config.base ├ ─ ─ webpack. Config. Dev. Js │ └ ─ ─ webpack. Config. Prod. Js ├ ─ ─ dist # after packaging file directory │ ├ ─ ─ Commons. Bundle. Js │ ├ ─ ─ CSS │ │ ├ ─ ─ Index. Eb8584e93d4fbcbec235. CSS │ │ └ ─ ─ test. Eb8584e93d4fbcbec235. CSS │ ├ ─ ─ img │ │ └ ─ ─ Test. D7a9b40f5bed4003db2585ba1bf24d86. JPG │ ├ ─ ─ index. The HTML │ ├ ─ ─ js │ │ ├ ─ ─ index. The bundle. Eb8584e93d4fbcbec235. Js │ │ └ ─ ─ Test. The bundle. Eb8584e93d4fbcbec235. Js │ └ ─ ─ test. The HTML ├ ─ ─ the SRC # source file │ ├ ─ ─ CSS │ │ ├ ─ ─ base. The SCSS │ │ ├ ─ ─ index. The SCSS │ │ ├ ─ ─ test. The SCSS │ │ └ ─ ─ var. SCSS │ ├ ─ ─ HTML │ │ ├ ─ ─ index. The HTML │ │ └ ─ ─ test. The HTML │ ├ ─ ─ img │ │ └ ─ ─ test. JPG │ └ ─ ─ js │ ├ ─ ─ │ ├─ ├─ ├─ ├─ ├─ ├.txt # ├.txt # ├.txtCopy the code

package.json

Take a look at the commands and dependencies in 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"
    }
Copy the code

Rely on:

"DevDependencies" : {" Babel - core ":" ^ 6.26.0 ", "Babel - loader" : "^ 7.1.2", "Babel - preset - env" : "^ 1.6.0," "the 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 - the 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", "the 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"}Copy the code

Webpack entry configuration

The entry file for Webpack is webpack.config.js, where the corresponding Webpack configuration is executed by command:

const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev'; Module.exports = require('./build/webpack.config.${env}.js');Copy the code

Basic WebPack configuration

In webpack.base.config.js there are some general processes for Webpack including loader and some file cleaning etc. It’s also a bit of a hassle to handle entry files because you need to configure a multi-page application. The htML-webpack-plugin plugin is used for multi-entry file processing. Get all HTML file names before using them. This is done using node’s FS and path API:

Exports = {getFileNameList(path) {let fileList = []; / / 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; }};Copy the code

Then I deal with the Webpack entry and HTML plugin:

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`); });Copy the code

Related WebPack configuration, see Github for details

// webpack configuration module.exports = {entry: entries,... HTMLPlugins: [// automatically generate HTML plugins...HTMLPlugins]};Copy the code

Most of the hard work is done in Base, local development and packaging of builds only need to do some simple processing

Webpack local development file configuration versus package online file configuration

Local and online configuration files need to merge the configuration in base (using Webpack-merge to do this) and then do a simple process.

// dev
module.exports = webpackMerge(webpackBase, {
    devServer: {
        contentBase: config.devServerOutputPath,
        overlay: {
            errors: true,
            warnings: true
        }
    }
});
Copy the code
// prod module.exports = webpackMerge(webpackBase, { devtool: false, plugins: [/ / code compression new webpack. Optimize. UglifyJsPlugin ({compress: {warnings: False}}), / / extraction common JavaScript code new webpack.optimize.Com monsChunkPlugin ({/ / the chunk called Commons name: 'commons', filename: '[name].bundle.js' }) ] });Copy the code

Zepto and other unmodular library processing

When dealing with unmodular libraries like Zepto, THE solution I take is CDN loading, and then adding external extensions to the Webpack configuration (externals prevents some import packages from being packaged into bundles, Instead, obtain these external dependencies at runtime.

externals: {
    'zepto': '$'
}
Copy the code

preprocess

The previous plan is to make three-terminal H5 and webview embedded in Android and ios, so some special processing is needed according to the platform. Gulp has gulp-preprocess to handle better, in Webpack can use preprocess-loader to handle.

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

Afterword.

That’s all we’ve done for the time being, but this tool hasn’t been put into use yet and it’s going to have a lot of problems. Follow-up questions will continue to supplement