如何将babel + terser工作流程转换为webpack?

时间:2019-03-25 18:37:39

标签: reactjs webpack babeljs terser

我的文件夹结构如下:

- src/internal-logic.js
- src/header.js
- src/footer.js
- package.json

这是我package.json的一部分

"scripts": {
    "start": "npx babel --watch src --out-dir dist --presets react-app/prod",
    "build": "npx babel src --out-dir dist --presets react-app/prod",
    "minify": "npx terser -c -m -o dist/common.min.js -- dist/header.js dist/footer.js dist/internal-logic.js"
  },

部署此代码时,我运行以下命令

npm run build
npm run minify

这会生成一个名为common.min.js的文件,我将在一些项目中使用它。

我想做的是使用webpack发出一个构建命令。我该怎么做?

更新

我创建了以下webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    'common.js': [
      path.resolve(__dirname, 'src/internal-logic.js'),
      path.resolve(__dirname, 'src/footer.js'),
      path.resolve(__dirname, 'src/header.js')
    ]
  },
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
         rules: [
            {
              test: /\.(js|jsx)$/,
              exclude: /node_modules/,
              use: {
                loader: "babel-loader",
                options: {
                  presets: ['@babel/preset-react']
                }
              }
            }
         ]
     },
};

这有效

0 个答案:

没有答案