Node中间层实践（三）——webpack配置

摘要：的意思是，如果碰到不能的情况，就整页刷新首页路由开发环境中使用了，需要将每一个的配置中写上欢迎继续关注本博的更新中间层实践一基于的全栈式开发中间层实践二搭建项目框架中间层实践三配置中间层实践四模板引擎中间层实践五中间层的逻辑处理

版权声明：更多文章请访问我的个人站Keyon Y，转载请注明出处。

这里没什么可说的，webpack的配置和插件实在太多了，用的时候查文档就行了。

项目地址：https://github.com/KeyonY/NodeMiddle

这里 先贴 个我的配置，注释写的挺详细的了。

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()
    ]
}

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中间层实践（一）——基于NodeJS的全栈式开发
Node中间层实践（二）——搭建项目框架
Node中间层实践（三）——webpack配置
Node中间层实践（四）——模板引擎pug
Node中间层实践（五）——express-中间层的逻辑处理