How to transpile and minify single file with webpack?

Question

I have a React application, and in my application I'm relying on react-scripts, so the build command is defined like this "build": "react-scripts build", and it works all fine. Now, the point is that inside my src directory I have a JS file called wrapper.js, which is a standalone file, and it is pure JS, no React stuff, but it uses ES6 and some newer features. So, what I want to do is that, I want create a new command, which will transpile and minify this file and will create a standalone copy of it. I thought to use webpack and I created a webpack.config.js file in the root of my project, which looks like this:

const path = require('path');
const MinifyPlugin = require('babel-minify-webpack-plugin');

module.exports = {
  mode: 'production',
  output: {
    path: __dirname + 'build',
    publicPath: '/build/',
    filename: 'wrapper.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src', 'wrapper.js')
        ],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  plugins: [
    new MinifyPlugin()
  ]
};

And I added the following to my package.json file "wrapper": "webpack". Now, when I run npm run-scripts wrapper, it executes the webpack command, but it throws error. The output looks like this:

> webpack

Hash: 0aa67383ec371b8b7cd1
Version: webpack 4.19.1
Time: 362ms
Built at: 04/06/2019 10:54:46 AM
 1 asset
Entrypoint main = wrapper.js
[0] ./src/index.js 223 bytes {0} [built] [failed] [1 error]

ERROR in ./src/index.js 22:4
Module parse failed: Unexpected token (22:4)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
>     <Root />,
|     document.getElementById('root'),
| );

What I see is that the problem is that webpack also tries to transpile and minify other files in my src directory, because it seems it has hit my React app's index.js file. How can I exclude everything? Or more precisely, how can I tell webpack to transpile and minify only the file /src/wrapper.js, and not to touch anything else at all?

`__dirname + 'build'` you need a directory separator in that path otherwise it will be like `'/your/projectbuild'` instead of `'/your/project/build'` — Patrick Evans, Apr 06 '19 at 09:21

score 5 · Answer 1 · answered Apr 08 '19 at 18:47

Lighter weight alternative could be to create a script in your package.json and use babel-minify, https://babeljs.io/docs/en/babel-minify

package.json

{
  ...

  "scripts": : {
    "minify": "minify wrapper.js --out-file wrapper.min.js --mangle.keepClassName"
  }

  ...
}

divine · Accepted Answer · 2019-04-06T09:25:04.603

3

Add entry object to your webpack.config.js.

module.exports={
    entry: './src/wrapper.js',
    ...
}

webpack points the entry object by default to ./src/index.js.

So if you don't override entry object, webpack will bundle the file in ./src/index.js

Update

To point to a output directory properly

output: {
    filename: 'wrapper.js',
    path: path.resolve(__dirname, 'build')
}

edited Apr 06 '19 at 09:25

answered Apr 06 '19 at 09:10

divine

4,746
3
27
38

@terett i updated answer with your issue about `output` – divine Apr 06 '19 at 09:26
Please check my edited code. I think the transpiling does not work properly. I get a new `wrapper.js` generated in build directory, but it seems very generic. I mean it does not include code from my original `wrapper.js` file, that one includes `addEventListener` and some other functions, but the generated output does not include them. Can you please check my edited code above? – Apr 06 '19 at 09:30
@terett can you keep the entry value as i specified in the answer and test your code? if you have your project in github please share url – divine Apr 06 '19 at 09:32
I tried with your entry too. I mean the problem is not the entry now, it recognizes the `wrapper.js` file that it is 7KB, but at the end it generates a 900bytes minified generic file, that does not include anything from my `wrapper.js` file. – Apr 06 '19 at 09:34
@terett you have renamed your output bundle to embed.js . embed.js could have your latest js code – divine Apr 06 '19 at 09:35
1

Okay, it seems there was a problem in my original file. Fixed it now. – Apr 06 '19 at 09:35
if you have your project in github please share url to your code – divine Apr 06 '19 at 09:38

How to transpile and minify single file with webpack?

2 Answers2

Linked