从零开始搭建react组件并且发布npm（五）

优化1、webpack结构优化

1、发现配置了eslint之后,config下的文件也有提示,先去掉提示
根目录下添加.eslintignore
写入 /config, 不检测config下的文件

2、合并开发和生产的配置项
npm i webpack-merge -D

3、公用的提出到webpack.base.config.js

module.exports = {
  resolve: {
    // 解决导入的文件可以不用添加后缀名
    extensions: ['.tsx', '.ts', 'jsx', '.js']
  },
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
          options: {
            // transpileOnly: true
          }
        }
      }
    ]
  }
};

4、webpack.dev.config.js 改造
引入 const { merge } = require('webpack-merge');
请注意安装的merge的版本,我这里webpack是4,webpack-merge已经安装到5了
早期的是
const merge = require('webpack-merge');

完整的配置

const path = require('path')
const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const baseConfig = require('./webpack.base.config.js'); // 引用公共配置

const devConfig = {
  mode: 'development',
  entry: path.resolve(__dirname, '../src/entry/dev_index.js'), // 指定开发入口文件
  devtool: 'source-map',
  output: {
    filename: 'bundle.js', // 打包后的文件名称
    path: path.resolve(__dirname, '../dist'), // 输出路径
  },
  devServer: {
    contentBase: path.join(__dirname, '../public'), // 最好写成绝对路径
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          {
            loader: 'css-loader',
            options: {
              sourceMap: true //是否打开样式查找
            }
          },
          // Compiles Sass to CSS
          {
            loader: 'sass-loader', // 解析样式文件
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../public/index.html')
    })
  ]
}

module.exports = merge(devConfig, baseConfig); // 将baseConfig和devConfig合并为一个配置


5、这里面也加入了devtool: 'source-map',这样调试才能找到位置
6、其实也可以把output删除,会有默认生成,而且我们用了HtmlWebpackPlugin,可以自动添加的

即使我们添加了output配置这时候我们有个发现开发环境启动之后并没有看到dist文件夹有生成的bundle.js文件,而且页面也能正常运行
这是由webpack-dev-server启动会生成到内存中,

7、同样修改一下webpack.prod.config.js

const path = require('path')
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const baseConfig = require('./webpack.base.config.js'); // 引用公共配置

const proConfig = {
  mode: 'production',
  entry: path.resolve(__dirname, '../src/components/index.tsx'), // 指定开发入口文件
  devtool: 'source-map',
  output: {
    filename: 'dragon.mobile.js', // 打包后的文件名称
    path: path.resolve(__dirname, '../dist'), // 输出路径
    libraryTarget: 'commonjs2',
    library: 'dragon-mobile'
  },
  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'yoai.mobile.css',
      // chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true //是否打开样式查找
            }
          },
          // Compiles Sass to CSS
          {
            loader: 'sass-loader', // 解析样式文件
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
}

module.exports = merge(proConfig, baseConfig); // 将baseConfig和devConfig合并为一个配置

配置加入了devtool: 'source-map' 和 clean-webpack-plugin
clean-webpack-plugin的作用是每次打包清空dist文件夹下的内容
这样其实不用rimraf也可以 
npm i clean-webpack-plugin -D

之后在写组件的时候再不断完善webpack优化,比如还需要图片的处理,期待下一章吧