production build

[asuh]

I appreciate the effort you put into this and would like to try it live on one of the sites I'm maintain. However, I'm new to webpack.

I see the example index.html file is a good baseline to follow but I can't seem to understand where the build files exist after running npm start. In fact, if I want a build of these scripts, it seems like I'd have to either:

1. use the original source files, knowing that no browsers can translate import yet, or
2. have webpack running on the production server

Would it be possible to include a few instructions to place this script into production, such as which values to change and how to produce a build or dist folder with all the files?

[gustaflindqvist]

@asuh

1. Webpack and babel-loader is solving the problem with import and transform your ECMAScript 6 code to ECMAScript 5 compatible code. Webpack will build the scripts together:

You have to add this to package.json:

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "test": "eslint --fix src/**/*.js test/**/*.js"
  },

Or run webpack direct from command line.

2. You don't want to run webpack-dev-server in production only on development.

[asuh]

1. Right, I understand what the transpiler does. And I wondered if running webpack from command line would work, but I tried that and it says it's not recognized. This is being done using Command Prompt on Windows 10. I have not globally installed Webpack; I just followed the instruction provided by this repo.

2. That's what I assumed, thanks for confirming

[philipwalton]

If you globally install webpack, you can then build the files by just running the webpack command (or webpack -p to generate minified files).

[asuh]

When I ran npm install, didn't it install webpack locally? I see webpack in the node_modules folder.

That said, I just ran npm install -g webpack and it's still not recognized as a command.

[philipwalton]

It does install it locally, but unless you've added local node_modules directories to your PATH (which is what I do), you won't be able to run the local install from the command by just typing webpack. You'd have to do ./node_modules/.bin/webpack.

Installing webpack globally is an easy way to get around this. But if that isn't working for you either, it sounds like your node/npm setup might have some issues with it.

[asuh]

Ok, I'll close out this issue since it appears to be localized to my machine. I appreciate the help.

I think it would be helpful to have an explicit instruction to have webpack installed globally as a prerequisite or at include the local node_modules into the PATH for those like me who are coming at this from zero.

[philipwalton]

One advantage of using npm scripts instead of webpack directly is it allows you to run webpack from the local install without modifying your path.

I'll add the following based on @gustaflindqvist's suggestion. Then you should be able to run npm run build and generate the files:

  "scripts": {
    "build": "webpack -p",
    // ...
  },

[philipwalton]

Added via https://github.com/philipwalton/analyticsjs-boilerplate/commit/0f742f896f0cfe276c7bf1b10396b03b7e6811f8.

[asuh]

I can confirm that change does output the /build/ folder and outputs minimized scripts as expected. However, it's still giving an error.

[philipwalton]

Do you still get this error if you remove the glob star as you mentioned in https://github.com/philipwalton/analyticsjs-boilerplate/issues/7#issuecomment-282106560?

[asuh]

That's a good question and the answer is that I do not get the error when I remove it.

[philipwalton]

Ok, I removed that glob pattern (since it wasn't necessary anyway), so hopefully it should work for you now. Strange though that it doesn't, as I'm pretty sure the glob module is used by many Windows users.