前言:
本文是学习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