前端

React+Koa服务端渲染(SSR同构)webpack项目配置

2019-08-06聚力创意

// webpack.conf.base.js
// 基础配置

const config = {
  node: {
    fs: 'empty',
    net: 'empty'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(ttf|eot|svg|woff|woff2)$/,
        loader: 'url-loader'
      }
    ]
  }
}


module.exports = config
// webpack.conf.client.dev.js
// 客户端开发环境配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.conf.base')

const config = merge(baseConfig, {
  mode: 'development',
  entry: ['@babel/polyfill', path.join(__dirname, '../src/client/index.js')],
  output: {
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js',
    path: path.join(__dirname, '../dist/static'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: '../index.html',
      favicon: './static/images/favicon.ico',
      inject: true
    })
  ]
})


module.exports = config
// webpack.conf.client.prod.js
// 客户端生产环境配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const baseConfig = require('./webpack.conf.base')

const config = merge(baseConfig, {
  mode: 'production',
  entry: ['@babel/polyfill', path.join(__dirname, '../src/client/index.js')],
  output: {
    filename: 'js/[name].[contenthash:8].js',
    chunkFilename: 'js/[name].[contenthash:8].js',
    path: path.join(__dirname, '../dist/static'),
    publicPath: '//static.julipay.com/blog/'
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
      chunkFilename: 'css/[name].[contenthash:8].css',
    }),
    new OptimizeCSSPlugin(),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: '../index.html',
      favicon: './static/images/favicon.ico',
      inject: true,
      minify: {
        removeComments: false,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      }
    })
  ],
  performance: {
    hints: false
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        libs: {
          name: 'chunks-libs',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial' // 只打包初始时依赖的第三方
        },
        commons: {
          name: 'chunks-commons',
          chunks: 'initial',
          minSize: 0,
          minChunks: 2, //  minimum common number
          priority: 5,
          reuseExistingChunk: true
        }
      }
    },
    runtimeChunk: {
      name: 'manifest'
    }
  }
})

module.exports = config
// webpack.conf.server.js
// 服务端配置

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.conf.base')

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

const config = merge(baseConfig, {
  mode: isDev ? 'development' : 'production',
  target: 'node',
  entry: ['@babel/polyfill', path.join(__dirname, '../src/server/index.js')],
  output: {
    filename: 'server.js',
    path: path.join(__dirname, '../dist/static'),
    publicPath: '/',
    libraryTarget: 'commonjs2'
  },
  node: {
    __dirname: false
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'isomorphic-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
})

module.exports = config
// .babelrc

{
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
蜀ICP备17044229号