Some of the company’s projects use the technology stack (jQuery+ CSS + HTML), in order to reflect their OWN KPI. Always want to optimize this technology stack, so we use a relatively simple vue+ Webpack way, but need webpack3.0 or more versions to support, can directly deal with an array of configuration objects, so you can write a separate configuration for each page.

1. Overall directory structure

In order to facilitate packaging, we create a pointmall folder and create sub-folders under it to represent each page. Each sub-folder has its own SPA application system, as shown in the figure:

The advantage of writing this way is that it is easier to use when configuring the webPack entry, and the structure is clearer.

2. Webpack configuration

2.1 File Structure

Create configuration files such as entry, output, plugins, loader, and common plugin, and introduce different configuration modules in the base, prod, dev package files, and then process them in different files according to different development environments.

2.2 entry. Js

According to the overall directory structure, each page folder has its own entry JS file. When configuring the Entry option, we can write it in the following encoding:

let defaults = require('./defaults');
let path = require('path');

let glob = require('glob');
let pagesDir = defaults.srcPath + '/pages';

let options = {
  	cwd: pagesDir, // Look in the pages directory
  	sync: true.// This is not asynchronous, only synchronous
};

let globInstance = new glob.Glob('* / *', options);
// An array of the form ['activity/mothersday', 'activity/year', 'draw/grid']
let pageArr = globInstance.found;

var configEntry = {};

pageArr.forEach((page) = > {
  	configEntry[page] = [path.resolve(pagesDir, page + '/index')];
});

module.exports = configEntry;

Copy the code

2.3 the output

let defaults = require('./defaults');
let path = require('path');
const devMode = process.env.NODE_ENV === "dev";

module.exports = {
	path: path.join(__dirname, '/.. /dist/'),
	filename: '[name]/entry.js'.publicPath: defaults.publicPath
}
Copy the code

2.4 the plugins

Plugin configuration files can be different for different environments, adding file compression, common style processing, code hot update processing

let webpack = require('webpack');
let defaults = require('./defaults');
let ExtractTextPlugin = require('extract-text-webpack-plugin');


let pluginsConfig = [
	new ExtractTextPlugin("[name]/styles.css"),
	new webpack.optimize.CommonsChunkPlugin({
		name: 'commons/commons'.filename: '[name]/bundle.js',})];if (defaults.env == 'dev') {
	pluginsConfig = pluginsConfig.concat([
		new webpack.HotModuleReplacementPlugin(),
	])
} else {
	pluginsConfig = pluginsConfig.concat([
		new webpack.DefinePlugin({
			'process.env.NODE_ENV': '"production"'
		}),
		/ / compression
		new webpack.optimize.UglifyJsPlugin(),
		new webpack.optimize.AggressiveMergingPlugin(),
	])
}

module.exports = pluginsConfig;
Copy the code

Because of the business of the company that designed the code for this project, it is not convenient to provide the code. I hope you can give me a thumbs up…