Webpack配置【四】分离打包项目代码与组件代码

本文链接：https://blog.youkuaiyun.com/weixin_43837268/article/details/98185024

本文详细介绍了如何在项目中配置React和Webpack，包括React包的安装、Webpack的基本配置、CSS的打包分离、代码压缩以及性能优化策略。通过具体步骤和代码示例，展示了如何创建并优化一个基于React的前端项目。

1.下载一个测试用的react包【测试使用】

cnpm i react --save-dev

2.在index.js中引入【测试使用】

import 'react'

3.在webpack.config.js

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
//css打包分离
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
//压缩
const BabiliPlugin = require('babili-webpack-plugin');

//导入webpack
const webpack = require('webpack')

const PATHS={
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
};
//css打包分离
const plugin = new ExtractTextPlugin({
  filename: '[name].css',
  ignoreOrder: true,
}); 

module.exports={
  devServer:{ 
    host: process.env.HOST, //Defaults to 'localhost
    port: 80,  //Defalut to 8080
    // overlay: true captures only errors
    overlay: {
      errors: true,
      warnings: true,
    },
  },
  performance:{
    hints:'warning',//'error'
    maxEntrypointSize: 500000,// bytes
    maxAssetSize: 450000,// bytes
  },
  entry:{
    app:PATHS.app,
    //分离组件
    vendor: ['react']
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  //解决开发环境下压缩插件报错问题
  devtool: 'source-map',
  module:{
    rules:[
      {
        test: /\.js$/,
        enforce: 'pre',
        
        loader:'eslint-loader',
        options:{
          emitWarning: true,
        },
      },
      //css打包分离
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: plugin.extract({
          use: {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          fallback : 'style-loader',
        }),
      },
    ],
  },
  plugins:[
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
    //css打包分离
    plugin,
    //压缩
    new BabiliPlugin(),
  ],
  //分离组件
  optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                name: "commons",
                chunks: "initial",
                minChunks: 2
            }
        }
    }
  },
};

4.运行打包命令

npm run build