react webpack打包react应用

时间：2022-12-19 15:26:26


安装webpack

npm i webpack -g

建立webpack.config.js文件

注意

  • 在根目录下建立文件
  • 设置源路径entry
  • 设置目标路径output
  • 设置加载模块及路径loaders
    • loader中的test正则表达式限定对应loader的应用范围
    • "include" is commonly used to match the directories
    • "exclude" should be used to exclude exceptions，try to prefer "include" when possible
var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'dist/');
var APP_DIR = path.resolve(__dirname, 'src/');

var config = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        include: __dirname
      }
    ]
  }
};

module.exports = config;

安装babel

npm i babel-loader babel-preset-es2015 babel-preset-react -S

建立.babelrc文件

注意

  • windows环境下使用编辑器创建，或者直接从其他文件目录拷贝
  • 在根目录下建立文件

以下是一份最简单的配置文件

{
  presets: ["es2015", "react"]  
}

运行webpack

在根目录下运行

webpack

命令，如果没有报错，进入配置的目标路径查看，可以看到已经生成了对应的目标文件。

疑问

  1. 以无参数方式打包生成的目标文件提及比较大。我目前只建立了一个简单的index文件，打包后大小接近900KB

  2. 以生产模式打包

    webpack -p

    同一个文件，体积从900KB降到了270KB。部署应用的时候必须要注意优化了。

参考

标签：

相关文章