版权声明：更多文章请访问我的个人网站KeyonY，转载请注明出处。这里没什么好说的，webpack的配置和插件太多了，使用的时候看看文档就好了。项目地址：https://github.com/KeyonY/NodeMiddle先把我的配置贴在这里，评论的还挺详细的。开发环境的webpack配置：varpath=require('path');varwebpack=require('webpack');varTransferWebpackPlugin=require('transfer-webpack-plugin');varExtractTextPlugin=require('extract-text-webpack-plugin');varlocalOptions=require('./localOptions');varentrys=require('./entrys.js');module.exports={条目：条目，输出：{路径：path.resolve(__dirname,'./dist'),publicPath:localOptions.host,filename:'Scripts/[name].js'},devtool:'eval-source-map',module:{规则:[{test:/\.js$/,loader:'babel-loader'},{test:/\.pug$/,loader:'pug-loader',options:{pretty:true}},{test:/\.scss$/,使用：ExtractTextPlugin.extract（{fallback：'style-loader'，使用：['css-loader'，{loader：'postcss-loader'，选项：{config：{path：'./build/postcss.config。js'}}},'sass-loader']})},]},plugins:[newwebpack.BannerPlugin('Copyright2017KeyonY'),//复制指定文件夹下的文件到指定目录newTransferWebpackPlugin([{from:'../src/assets',to:'../dist/assets'},],path.resolve(__dirname)),//webpack可以比较id的使用频率并分发以找到最短的id并将其分配给频率高的模块newwebpack.optimize.OccurrenceOrderPlugin(),newwebpack.HotModuleReplacementPlugin(),newExtractTextPlugin({filename:'Contents/[name].css',disable:true,allChunks:true}),//允许错误不中断程序newwebpack.NoErrorsPlugin()]}生产环境的webpack配置：varpath=require('path');varwebpack=require('webpack');varTransferWebpackPlugin=require('transfer-webpack-plugin');varExtractTextPlugin=require('extract-text-webpack-plugin');varentries=require('./entrys.js');module.exports={条目:entries,output:{path:path.resolve(__dirname,'../dist'),publicPath:'/',文件名:'Scripts/[name].js'},模块:{规则:[{test:/\.js$/,loader:'babel-loader'},{test:/\.pug$/,加载器：'pug-loader'，选项：{pretty：true}}，{test：/\.scss$/，使用：ExtractTextPlugin.extract（{fallback：'style-loader'，使用：['css-loader',{loader:'postcss-loader',options:{config:{path:'./build/postcss.config.js'}}},'sass-loader']})}]},plugins:[newwebpack.BannerPlugin('Copyright2017KeyonY'),//复制指定文件夹下的文件到指定目录newTransferWebpackPlugin([{from:'../src/assets',to:'../dist/assets'},{from:'../src/Views',to:'../dist/Views'},],path.resolve(__dirname)),//webpack可以通过比较id的使用频率和分布来得到分配给常用模块的最短idnewwebpack.optimize.OccurrenceOrderPlugin(),newExtractTextPlugin({filename:'Contents/[name].css',disable:false,allChunks:true}),//混淆压缩js和cssnewwebpack.optimize.UglifyJsPlugin({压缩:{属性:false,警告:false},输出:{beautify:false,quote_keys:true},mangle:{screw_ie8:false},sourceMap:false,except:['$','exports','require']//排除关键字})],stats:'normal'}entry配置，因为组件太多（在'src/Components'），所以为了简化webpack.config的内容，我把entry.js中的entry配置写成模块import//entry.jsvarwebpackHotMiddlewareScript='webpack-hot-middleware/client?reload=true&timeout=2000';//reload=true表示如果不能热重载，则刷新整个页面varisDev=process.env.NODE_ENV==='dev';varentryJson={base:'./src/Components/base/base.js',index:'./src/Components/index/index.js',//主页--默认路由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'vartransJson={};for(leteinentryJson){transJson[e]=[entryJson[e],webpackHotMiddlewareScript];}module.exports=transJson;}else{module.exports=entryJson;}欢迎继续关注本博的更新Node中间件实战（一）——基于NodeJS的全栈开发Node中间层实战（二）)——搭建项目框架Node中间层实践（三）——webpack配置Node中间层实践（四）——模板引擎pugNode中间层实践（五）——express-中间层的逻辑处理
