webpack中的5个主要组成部分

一、entry 入口

负责处理我们页面根路径进行加载

// 入口文件的配置
   entry: {
      index: [
         'webpack-dev-server/client?http://0.0.0.0:8888',
         'react-hot-loader/patch',
         'webpack/hot/only-dev-server',
         resolve('./src/main/index.tsx'),
      ],
   },

二、output 出口

负责帮助我们编译后的文件输出

// 出口文件的配置
   output: {
      filename: 'js/[name].js',
      chunkFilename: 'js/[id].js',
      path: resolve('./dist'),
      // 对于热替换(HMR)是必须的，让 webpack 知道在哪里载入热更新的模块(chunk)
      publicPath: '/',
   },

三、devtool 模式

负责处理我们代码编译，例如是否展示源码，打包体积，是否可以映射，一般区分测试环境和正式环境设置的不一样

// 测试环境
 devtool: 'cheap-module-eval-source-map',
// 正式环境，可以不配置
 devtool: 'nosources-source-map',

四、module （loaders）编译器

加载处理我们代码编译的工具，ts，jsx，file，less等等格式的文件进行转换成浏览器可以运行的文件js，css，html

 // 模块
   module: {
      rules: [{
            test: /\.(tsx|ts)$/,
            exclude: /node_modules/,
            use: [{
                  loader: 'babel-loader',
                  options: {
                     cacheDirectory: true,
                  },
               },
               {
                  loader: 'ts-loader',
                  options: {
                     transpileOnly: true,
                     experimentalWatchApi: true,
                  },
               },
            ],
         },
         {
            test: /\.(c|le|sa)ss$/,
            use: [{
                  loader: MiniCssExtractPlugin.loader,
                  options: {
                     publicPath: '../',
                     hmr: devMode,
                     reloadAll: true,
                  },
               },
               {
                  loader: 'css-loader',
                  options: {
                     sourceMap: true,
                  },
               },
               {
                  loader: 'less-loader',
                  options: {
                     sourceMap: true,
                     javascriptEnabled: true,
                     modifyVars: theme,
                  },
               },
            ],
         },
         {
            test: /\.(png|jpe?g|gif|svg)$/,
            use: [{
               loader: 'url-loader',
               options: {
                  limit: 102400,
                  name: 'img/[name].[hash:4].[ext]',
               },
            }, ],
         },
         {
            test: /\.(woff|eot|ttf|blend)$/,
            use: [{
               loader: 'url-loader',
               options: {
                  limit: 8192,
                  name: 'font/[name].[hash:4].[ext]',
               },
            }, ],
         },
      ],
      noParse: [/react\.min\.js/],
   },

五、plugin 辅助插件

整体的插件配置，基于webpack的生态，很多插件得到应用，我们可以解除插件提升我们的开发效率

 // 将打包后的资源注入到html文件内
      new HtmlWebpackPlugin({
         title: '系统',
         filename: 'index.html',
         template: resolve('./src/main/index.html'),
         favicon: resolve('./src/main/favicon.ico'),
         inject: true,
         min: '',
         bundleUrl: bundleUrl(),
         // 配置多入口chunks，不配置默认遍历所有的
         chunks: ['index', 'vendors', 'commons', 'manifest'],
         minify: {
            removeComments: true,
         },
      }),
      // 定义环境变量
      new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      }),
      // 开启全局的模块热替换(HMR)
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NamedModulesPlugin(),

当然webpack还有很多其他配置，根据不同的配置进行代码的搭建处理不同的业务需求，也是很好的