从零搭建一个react-hooks项目（二）

• 上一篇搭建了基本的webpack项目，可以支持react，less的基本使用，但是没有考虑到项目中的实际情况，例如生产环境的代码混淆，代码压缩，开发环境的热启动等。
• 下面我们就针对开发与生产环境的不同需求，对webpack进行下一步的配置
• 生产环境的配置与开发环境的配置有很多的不同点，所以我们需要分别建对应的配置文件，在根目录下分别创建 webpack.prod.js（生产配置） 与webpack.dev.js（开发配置）
• 然后在package.json中的scripts里新建两个命令，分别是 “build”: “webpack --config webpack.prod.js”, “dev”: “webpack --config webpack.dev.js”

开发环境的配置

• 先将webpack.config.js中的配置复制到webpack.dev.js中，然后进行我们的基本配置修改
• 首先开发中需要对错误进行一个精准定位，所以在配置中开启 devtool: “inline-source-map”，如下所示
• css的样式覆盖关系在我们之前的开发中就已经使用了source: map的属性，所以可以在开发环境中继续使用

const path = require('path')
const webpack = require('webpack')
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
   
  entry: {
   
    app: './index.js',
    test: './index.jsx'
  },
  output: {
   
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[name].bundle.js'
  },
  module: {
   
    rules: [
      {
   
        test: /\.(le|c)ss$/,
        use: [
          'style-loader',
          {
   
            loader: 'css-loader',
            options: {
   
              sourceMap: true //是否打开样式查找
            }
          },
          {
   
            loader: 'postcss-loader', // 为浏览器加前缀
            options: {
   
              ident: 'postcss',
              sourceMap: true,
              plugins: loaders => [
                require('autoprefixer')({
   
                })
              ]
            }
          },
          {
   
            loader: 'less-loader', // 解析样式文件
            options: {
   
              sourceMap: true
            }
          }
        ]
      },
      {
   
        test: /\.(js)x?$/,
        use: ['babel-loader'],
        exclude: /node-modules/
      }
    ]
  },
  devtool: 'inline-source-map',
  plugins: [
    new HTMLWebpackPlugin({
   
      inject: true, // 所有js脚本放于body之后
      hash: true, // 为静态资源生成hash，用于清楚缓存
      cache: true, // 仅在文件被更改时发出文件
      title: 'react admin',
      filename: 'index.html',
      template: path.resolve(__dirname, 'index.html'),
      minify: {
   
        collapseWhitespace: true, // 折叠空白
        removeComments: true, // 删除注释
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true
      }
    }),
    new CleanWebpackPlugin()
  ]
}

• 接着在我们的开发过程中我们不希望每做一次改动都需要手动的执行一次npm run dev，所以我们这里使用我们的webpack-dev-server来为我们提供node的静态服务，配合webpack的打包可以让我们实现实时更新，实时显示，不需要手动触发npm run dev命令来进行刷新
• 首先我们修改package.json中的dev命令为:“webpack-dev-server --open --config webpack.dev.js”
• 接下来就需要对该静态服务进行配置，配置项放在配置中的devServer下面，如下

const path = require('path')
const webpack = require('webpack')
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
   
  entry: {
   
    ...
  },
  output: {
   
    ...
  },
  module: {
   
    ...
  },
  devtool: 'inline-source-map',
  plugins: [
    ...
  ],
  devServer: {
   
    contentBase: './dist', // 静态文件目录，用于浏览器显示
    clientLogLevel: 'warning',  // 输出日志级别
    hot: true, // 启动热更新
    publicPath: '/', // 浏览器访问路径
    compress: true, // 启用gzip压缩
    port: 9998,
    open: true, // 自动调起浏览器
    overlay: {
    // 出现错误或警告是否覆盖页面线上错误信息
      warnings: true,
      errors: true
    },
    quiet: true,
    proxy: {
    // 代理
    },
    watchOptions: {
    // 监控文件相关配置
      poll: true,
      ignored: /node_modules/,
      aggregateTimeout: 300  // 默认值, 当你连续改动时候, webpack可以设置构建延迟时间(防抖)
    }
  }
}

• 然后在执行我们的npm run dev就可以发现会自动帮我们打开浏览器，然后当我们修改主要文件的时候也会重新帮我们刷新页面
• 上面的自动刷新在某些场景下会有一些问题，当依赖的模块发生改变时可能当前的页面绑定关系不能即时刷新，所以我们需要引入新的模块来进行问题修复
• webpack 自带模块热替换插件 HotModuleReplacementPlugin ，使用时只需要引入webpack，然后在plugin中添加 new webpack.HotModuleReplacementPlugin()即可解决部分依赖刷新不及时的问题，如下

...
const webpack = require('webpack')

module.exports = {
   
  entry: {
   
    ...
  },
  output: {
   
    ...
  },
  module: {
   
    ...
  },
  devtool: 'inline-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    ...
  ],
  devServer: {
   
    ...
  }
}

• 再次执行npm run dev就能实时的更改代码并实时刷新了，至此，开发环境的基本配置就完成了

生产环境的构建

• 生产环境为了客户的体验与代码的隐私性，我们一般都会对代码进行混淆压缩，包括css与js代码的压缩，下面我们就来进行相关的配置
• 首先还是将我们之前的webpack.config.js中的基本配置复制到webpack.prod.js中，然后在此基础上进行相关的修改
• 上一章中我们将output中的filename命名为[name].js与入口文件一致，在生产环境中，为了避免名称一致导致的缓存问题，我们要对其进行修改
• 修改为[name].[chunkhash].js，这样在生成文件的时候会默认添加一个hash值，避免缓存问题的出现，修改如下

// 先贴一下上一章最后的配置内容，后续不再完整展示
const path = require('path')
const webpack = require('webpack')
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
   
  entry: {
   
    app: './index.js',
    test: './index.jsx'
  },
  output: {
   
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[name].bundle.js'
  },
  module: {
   
    rules: [
      {
   
        test: /\.(le|c)ss$/,
        use: [
          'style-loader',
          {
   
            loader: 'css-loader',
            options: {
   
              sourceMap: true //是否打开样式查找
            }
          },
          {
   
            loader: 'postcss-loader', // 为浏览器加前缀
            options: {
   
              ident: 'postcss',
              sourceMap: true,
              plugins: loaders => [
                require('autoprefixer')({
   
                })
              ]
            }
          },
          {
   
            loader: 'less-loader', // 解析样式文件
            options: