本章节，我们一起来探讨以下问题：如何对编译后的文件进行gzip压缩，如何让开发环境的控制台输出更加高逼格，如何更好的对编译后的文件进行bundle分析等。

productionGzip:true,

    const webpackConfig=merge(baseWebpackConfig,{
        mode: ‘production‘,output: {
            path: config.build.assetsRoot,filename: utils.assetsPath(‘js/[name].[chunkhash:16].js‘),chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js‘)
        },module: {
            rules: utils.styleLoaders({
                sourceMap: config.build.productionSourceMap,extract: true,usePostCSS: true,cssModule:config.base.cssModule,cssModuleExcludePath:config.base.cssModuleExcludePath
              })
        },plugins: [
            new HtmlWebpackPlugin({
                template: config.build.index,inject: ‘body‘,minify: {
                    removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true
                },}),new CleanWebpackPlugin([config.build.assetsRoot],{ allowExternal: true }),//导出css 
            new MiniCssExtractPlugin({
                filename: utils.assetsPath(‘css/[name].[hash].css‘),chunkFilename: utils.assetsPath(‘css/[id].[hash].css‘),],optimization: {
            minimizer: [
                new UglifyJSPlugin(),new OptimizeCSSAssetsPlugin({
                    cssprocessorOptions: true
                        ? {
                            map: { inline: false }
                        }
                        : {}
                })
            ],splitChunks: {
                chunks: "all",minChunks: 1,cacheGroups: {
                    framework: {
                        priority: 200,test: "framework",name: "framework",enforce: true,reuseExistingChunk: true
                    },vendor: {
                        priority: 10,test: /node_modules/,name: "vendor",reuseExistingChunk: true
                    }
                }
            }
        }
    });

    if (config.build.productionGzip) {
        //添加gzip压缩插件
    }

    module.exports = webpackConfig;

npm i compression-webpack-plugin --save-dev

productionGzipExtensions: [‘js‘,‘css‘],

    new RegExp(‘\\.(‘ +
        config.build.productionGzipExtensions.join(‘|‘) +
    ‘)$‘)

    if (config.build.productionGzip) {
        const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘)

        webpackConfig.plugins.push(
          new CompressionWebpackPlugin({
            filename: ‘[path].gz[query]‘,algorithm: ‘gzip‘,test: new RegExp(
              ‘\\.(‘ +
              config.build.productionGzipExtensions.join(‘|‘) +
              ‘)$‘
            ),threshold: 10240,minRatio: 0.8
          })
        )
      }

npm run build

npm install --save-dev webpack-bundle-analyzer

bundleAnalyzerReport: process.env.npm_config_report

    if (config.build.bundleAnalyzerReport) {
      const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin
      webpackConfig.plugins.push(new BundleAnalyzerPlugin())
    }

npm run build

npm run build --report

npm i --save-dev ora chalk

    const ora = require(‘ora‘);
    const chalk = require(‘chalk‘)
    const webpack = require(‘webpack‘)
    const webpackConfig = require(‘./webpack.prod.conf‘);
    const spinner = ora(‘编译中...\n‘).start();
    webpack(webpackConfig,function (err,stats) {
        if (err) {
            spinner.fail("编译失败");
            console.log(err);
            return;
        }
        spinner.succeed(‘编译已结束. \n‘);

        process.stdout.write(stats.toString({
            colors: true,modules: false,children: false,chunks: false,chunkModules: false
        }) + ‘\n\n‘);
        console.log(chalk.cyan(‘  编译成功！\n‘))
        console.log(chalk.yellow(
            ‘  提示: 编译后的文件可以上传并且部署到服务器\n‘ +
            ‘  通过file:// 打开index.html不会起作用.\n‘
        ))
    })

"build": "node build/build.js",

npm run build

//render: h => h(App) 是下面内容的缩写：

render: function (createElement) {
    return createElement(App);
}
//进一步缩写为(ES6 语法)：

render (createElement) {
    return createElement(App);
}
//再进一步缩写为：

render (h){
    return h(App);
}
//按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);

{
        test:/\.css$/,
        use:[
          ''style-loader'',
          ''css-loader''
        ]
}

const isDev = process.env.NODE_ENV === ''development''

const config = {
    entry:{},
    output:{},
    plugins:{}
}

if(isDev){
    config.devServer = {
    host: ''0.0.0.0'', //设置 0.0.0.0 的host 可以访问 localhost，127.0.0.1，本季ip来访问
    contentBase: path.join(__dirname, ''../dist''), //因为，devserver是服务打包后的文件，所以和output的path 保持一致即可
    port: ''8888'',
    hot: true,
    overlay: {
      errors: true //server有任何的错误，则在网页中 蒙层加提示
    }
  }
}

module.exports = config;

if(isDev){
    config.devServer = {
    host: ''0.0.0.0'', //设置 0.0.0.0 的host 可以访问 localhost，127.0.0.1，本季ip来访问
    contentBase: path.join(__dirname, ''../dist''), //因为，devserver是服务打包后的文件，所以和output的path 保持一致即可
    port: ''8888'',
    hot: true,
    overlay: {
      errors: true //server有任何的错误，则在网页中 蒙层加提示
    },
    publicPath: ''/public/'', //增加公共路径，对应着output的 publicPath
    historyApiFallback: {
      index: ''/public/index.html'' //这里是给本地服务器增加功能：因为是单页面应用，如果刷新页面，或者访问不到路由，则跳转到首页
    },
  }
}

{
  "presets": [
    ["es2015", { "loose": true }],
    "react"
  ],
  "plugins": [ "react-hot-loader/babel"] //使用babel的情况下，添加 react-hot-loader，支持react 热更新
}

import React from ''react''
import ReactDOM from ''react-dom''
import App from ''./App.jsx''

ReactDOM.hydrate(<App />,document.getElementById(''root''));

if (module.hot) {
  module.hot.accept(''./App.jsx'', () => {
    const NextApp = require(''./App.jsx'').default  
    ReactDOM.hydrate(<NextApp />,document.getElementById(''root''))
  })
}

// module.hot 监听到 app.jsx发生变化之后，重新获取 app.jsx 为NextApp 然后重新渲染；

const webpack = require(''webpack''); //因为用到了webpack下的包  HotModuleReplacementPlugin
const config ={

}
if(isDev){
    config.entry=[
        ''react-hot-loader/patch'',  //入口文件中要把 hot 打包进去
        path.join(__dirname,''../client/app.js'')
    ],
    config.devServer = {
        host: ''0.0.0.0'', 
        contentBase: path.join(__dirname, ''../dist''), 
        port: ''8888'',
        hot: true, //打开这里
        overlay: {
          errors: true 
        },
        publicPath: ''/public/'', 
        historyApiFallback: {
          index: ''/public/index.html''
        }
    }
    config.plugins.push(new webpack.HotModuleReplacementPlugin) //增加了这里
}

import React from ''react''
import ReactDOM from ''react-dom''
import { AppContainer } from ''react-hot-loader''
import App from ''./App.jsx''

ReactDOM.hydrate(<App />,document.getElementById(''root''));

const root = document.getElementById(''root''); 
const render = Component => {
    ReactDOM.hydrate(
        <AppContainer>
            <Component/>
        </AppContainer>,
        root
    )
}

render(App);
if (module.hot) {
  module.hot.accept(''./App.jsx'', () => {
    const NextApp = require(''./App.jsx'').default  
    render(NextApp);
  })
}

const express = require(''express'')
const ReactSSR = require(''react-dom/server'');
const fs = require(''fs'')
const path = require(''path'')
const app = express();

const isDev = process.env.NODE_ENV === ''development''; //在这里定义
if(!isDev){
    const serverEntry = require(''../dist/server-entry'').default;//引入的是服务端的配置打包后的js文件
    const template = fs.readFileSync(path.join(__dirname, ''../dist/index.html''), ''utf8'')//同步引入客户端打包生成的 html 文件，如果不使用 utf8 则是buffer文件
    app.use(''/public'', express.static(path.join(__dirname, ''../dist''))); //给静态文件指定返回内容，这里给piblic文件夹下的内容返回的是静态文件的dist文件夹
    app.get(''*'', function (req, res) {
      const appString = ReactSSR.renderToString(serverEntry);
      res.send(template.replace(''<!--app-->'',appString)) //用返回的js文件替换掉模板中的<app>，然后发送的是模板文件
    })    
}else{
    //util 文件夹下的 dev.static.js
    const devStatic = require(''./util/dev.static.js'');
　　 devStatic(app); //之所以这里把 app 传递进去，是因为app是 express(),我们可以在新建的文件中继续使用 app.get、app.send 等函数
}

app.listen(3333, function () {
  console.log(''server is listening on 3333'')
})

const axios = require(''axios'');// 在浏览器端和服务器端都可以使用 axios


/*在这里从内存中获取模版html，因为每次dev-server启动的是本地的服务，url是固定的;
这样可以根据 dev-server 实时的拿到最新的 模板文件
*/
const getTemplate = () => {
    return new Promise((resolve,reject)=>{
        axios.get(''http://localhost:8888/public/index.html'')
        .then(res => {
            resolve(res.data); //返回的内容放在了 data中
        })
        .catch(reject)
    })
}

module.exports = function (app) {
    app.get("*",function(req,res){

    })
}

const axios = require(''axios'');
//从内存中获取 js等bundle文件，启动webpack，通过webpack打包的结果，获取bundle文件。
const webpack = require(''webpack'');
//通过 config.server.js 文件 获取 输出文件路径等信息
const serverConfig = require(''../../build/webpack.config.server.js'');

const getTemplate = () => {
    return new Promise((resolve,reject)=>{
        axios.get(''http://localhost:8888/public/index.html'')
        .then(res => {
            resolve(res.data); 
        })
        .catch(reject)
    })
}

// 通过webpack的watch方法，监听配置文件中的 entry 入口文件（及其依赖的文件）是否发生变化，一旦变化，就会重新打包（类似于热更新）
const serverCompiler = webpack(serverConfig);
serverCompiler.watch({},(err,status)=>{//status 在终端上显示的信息
    if(err) throw;
    let stats = status.toJson();
    stats.error.forEach(err => console.log(err));
    stats.waring.forEach(warn => console.warn(warn));

    const bundlePath = path.join(
        serverConfig.output.path,
        serverConfig.output.filename
    );// 获取输出文件的路径
})

module.exports = function (app) {
    app.get("*",function(req,res){

    })
}

const axios = require(''axios'');
const path = require(''path'');
const webpack = require(''webpack'');
const serverConfig = require(''../../build/webpack.config.server.js'');
// 要使用 memory-fs，所以要安装 npm i memory-fs -D;
// 在内存中读写文件，这样就可以从内存中读取 获取到的文件
const MemoryFs = require(''memory-fs'');

//最后要把得到的js文件，渲染到dom上去，所以要用到
const ReactDomServer = require(''react-dom/server'');

const getTemplate = () => {
    return new Promise((resolve,reject)=>{
        axios.get(''http://localhost:8888/public/index.html'')
        .then(res => {
            resolve(res.data); 
        })
        .catch(reject)
    })
}

//通过module的 constructor 构造方法去创建一个新的 module
const Module = module.constructior

let serverBundle;
const mfs = new MemoryFs;//new 一个 对象；
const serverCompiler = webpack(serverConfig);
serverCompiler.outputFileSystem = mfs; //webpack 提供的配置项，其输出通过mfs内存读写，这里如果写错名字就会写到硬盘中
serverCompiler.watch({},(err,status)=>{
    if(err) throw;
    let stats = status.toJson();
    stats.error.forEach(err => console.log(err));
    stats.waring.forEach(warn => console.warn(warn));

    const bundlePath = path.join(
        serverConfig.output.path,
        serverConfig.output.filename
    );// 获取输出文件的路径
    //通过 mfs 读取文件的路径，就可以得到文件，是 string 类型的文件，无法直接使用
    const bundle = mfs.readFileSync(bundlePath,''utf-8''); //需要传入 编码格式
    const m = new Module(); 
    //动态编译成一个文件，需要给这个文件指定文件名字，否则无法在缓存中进行缓存，下次则拿不到该文件
    m._compile(bundle,''server-entry.js'');//使用module的_compile方法将String的文件，生成一个新的 模块，转换成了真正可以读取的文件
    /*为了在后面的 app.get方法中使用。将生成的文件赋值给全局变量；
    此外，因为是在 watch中执行的，每次依赖的文件更新，输出的文件也会更新*/
    serverBundle = m.exports.default; 
})

module.exports = function (app) {
    app.get("*",function(req,res){
        getTemplate().then(template => {
            const content = ReactDomServer.renderToString(serverBundle);
            res.send(template.replace(''<!--app-->'',content))
        })
    })
}

{
    "script":{
        "dev:server":"cross-env NODE_ENV = development node server/sever.js"
    }

}

const axios = require(''axios'');
const path = require(''path'');
const webpack = require(''webpack'');
const serverConfig = require(''../../build/webpack.config.server.js'');
const MemoryFs = require(''memory-fs'');
const ReactDomServer = require(''react-dom/server'');
//引入中间件
const proxy = require(''http-proxy-middleware'');


const getTemplate = () => {
    return new Promise((resolve,reject)=>{
        axios.get(''http://localhost:8888/public/index.html'')
        .then(res => {
            resolve(res.data); 
        })
        .catch(reject)
    })
}

const Module = module.constructior

let serverBundle;
const mfs = new MemoryFs;
const serverCompiler = webpack(serverConfig);
serverCompiler.outputFileSystem = mfs; 
serverCompiler.watch({},(err,status)=>{
    if(err) throw;
    let stats = status.toJson();
    stats.error.forEach(err => console.log(err));
    stats.waring.forEach(warn => console.warn(warn));

    const bundlePath = path.join(
        serverConfig.output.path,
        serverConfig.output.filename
    );
    const bundle = mfs.readFileSync(bundlePath,''utf-8'');
    const m = new Module(); 
    m._compile(bundle,''server-entry.js'');
    serverBundle = m.exports.default; 
})

module.exports = function (app) {
//服务器端端口是 3333；客户端的端口是 8888；
//这里做的代理是，访问当前3333端口的public文件时，代理去请求客户端的 8888端口文件

    app.use(''/public'',proxy({
        target:''http://localhost:8888''
    }))

    app.get("*",function(req,res){
        getTemplate().then(template => {
            const content = ReactDomServer.renderToString(serverBundle);
            res.send(template.replace(''<!--app-->'',content))
        })
    })
}