【Node中间层实践小记（二）】----webpack配置

前言：
    本文是学习Node中间层实践的相关笔记，推荐大家可以去阅读Keyon Y大佬的原文Node中间层实践 。开启本文前，也可以先去阅读以下，Node中间层实践（一）——基于NodeJS的全栈式开发，Node中间层实践（二）——搭建项目框架，对了解本文内容有所帮助。（PS：继续还债的node小白╮(╯▽╰)╭）

一、开发环境的webpack配置

var path = require('path');
var webpack = require('webpack');
var TransferWebpackPlugin = require('transfer-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var localOptions = require('./localOptions');

var entrys = require('./entrys.js');

module.exports = {
	entry: entrys,
	output: {
		path: path.resolve(__dirname, './dist'),
		publicPath: localOptions.host,
		filename: 'Scripts/[name].js'
	},
	devtool: 'eval-source-map',
	module: {
		rules: [
			{test: /\.js$/,loader:'babel-loader'},
			{test: /\.pug$/,loader:'pug-loader',options: {pretty: true}},
			{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader',{loader: 'postcss-loader',options: {config: {path: './build/postcss.config.js'}}},'sass-loader']})},
		]
	},
	plugins: [
		new webpack.BannerPlugin('Copyright 2017 Keyon Y'),
		//把指定文件夹下的文件复制到指定的目录
		new TransferWebpackPlugin([
				{from: '../src/assets', to: '../dist/assets'},
			],path.resolve(__dirname)),
		// webpack就能够比对id的使用频率和分布来得出最短的id分配给使用频率高的模块
		new webpack.optimize.OccurrenceOrderPlugin(),
		new webpack.HotModuleReplacementPlugin(),
		new ExtractTextPlugin({filename:'Contents/[name].css',disable: true,allChunks: true}),
		// 允许错误不打断程序
		new webpack.NoErrorsPlugin()
	]
}

二、生产环境的webpack配置

var path = require('path');
var webpack = require('webpack');
var TransferWebpackPlugin = require('transfer-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var entrys = require('./entrys.js');

module.exports = {
	entry: entrys,
	output: {
		path: path.resolve(__dirname, '../dist'),
		publicPath: '/',
		filename: 'Scripts/[name].js'
	},
	module: {
		rules: [
			{test: /\.js$/,loader:'babel-loader'},
			{test: /\.pug$/,loader:'pug-loader',options: {pretty: true}},
			{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader',{loader: 'postcss-loader',options: {config: {path: './build/postcss.config.js'}}},'sass-loader']})}
		]
	},
	plugins: [
		new webpack.BannerPlugin('Copyright 2017 Keyon Y'),
		//把指定文件夹下的文件复制到指定的目录
		new TransferWebpackPlugin([
				{from: '../src/assets', to: '../dist/assets'},
				{from: '../src/Views', to: '../dist/Views'},
			],path.resolve(__dirname)),
		// webpack就能够比对id的使用频率和分布来得出最短的id分配给使用频率高的模块
		new webpack.optimize.OccurrenceOrderPlugin(),
		new ExtractTextPlugin({filename:'Contents/[name].css',disable: false,allChunks: true}),
		// 混淆压缩js和css
		new webpack.optimize.UglifyJsPlugin({
			compress: {
				properties: false,
				warnings: false
			},
			output: {
				beautify: false,
				quote_keys: true
			},
			mangle: {
				screw_ie8: false
			},
			sourceMap: false,
            except: ['$', 'exports', 'require']    //排除关键字
		})
	],
	stats: 'normal'
}

entry的配置，因为有太多的组件('src/Components’中)了，所以为了简化webpack.config的内容，把entry的配置写在entry.js作为一个模块导入进来。

// entry.js
var webpackHotMiddlewareScript = 'webpack-hot-middleware/client?reload=true&timeout=2000';	//reload=true的意思是，如果碰到不能hot reload的情况，就整页刷新
var isDev = process.env.NODE_ENV === 'dev';

var entryJson = {
	base: './src/Components/base/base.js',
	index: './src/Components/index/index.js',   // 首页--Default 路由
	message: './src/Components/message/message.js',
	home: './src/Components/home/home.js',
	modals: './src/Components/modals/modals.js',
}

if(isDev) { // 开发环境中使用了webpack-hot-middleware，需要将每一个entry的配置中写上'webpack-hot-middleware/client?reload=true&timeout=2000'
	var transJson = {};
	for(let e in entryJson) {
		transJson[e] = [entryJson[e], webpackHotMiddlewareScript];
	}
	module.exports = transJson;
}else {
	module.exports = entryJson;
}

参考博客：

Node中间层实践（三）——webpack配置 https://juejin.cn/post/6844904191605866509