Foreword: This article is related to learning the practice of Node middle layer. It is recommended that you read the original text of Node middle layer practice
by Keyon Y. Before starting this article, you can also read the following, Node middle layer practice (1) - full-stack development based on NodeJS , Node middle layer practice (2) - building a project framework , which is helpful for understanding the content of this article. (PS: Node Xiaobai who continues to repay debts ╮(╯▽╰)╭)
1. Webpack configuration of the development environment
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()
]
}
2. Webpack configuration for production environment
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'
}
The configuration of entry, because there are too many components (in 'src/Components'), so in order to simplify the content of webpack.config, the configuration of entry is written in entry.js and imported as a module.
// 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;
}
Reference blog:
Node middle layer practice (3) - webpack configuration https://juejin.cn/post/6844904191605866509