require libs for production bundle

[flosse]

Is it possible to require a different file depending on my environment?
During the development I'd like to use

require('scripts!libpath/lib.js')

but for production use I'd like to use

require('scripts!libpath/lib.production.js')

I don't want to compress a lib, I just want to do s.th. like I can do with gulp:

if (gulp.env.production){
  // handle
}

[sokra]

You can it i. e.

• by extension .production.js

{
  resolve: {
    extensions: gulp.env.production ? ["", ".production.js", ".js"] : ["", ".js"]
  }
}

require("libpath/lib");

• by define

{
  plugins: [
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(!!gulp.env.production)
    })
  ]
}

if(PRODUCTION)
  require("libpath/lib.production.js");
else
  require("libpath/lib.js");
require(PRODUCTION ? "libpath/lib.production.js" : "libpath/lib.js");
require("libpath/lib" + (PRODUCTION ? ".production.js" : "libpath/lib.js"));

• by replacement

{
  plugins: [
    gulp.env.production ? new webpack.NormalModuleReplacementPlugin(
      /libpath.lib\.js$/, 
      "/absoule/path/to/libpath/lib.production.js") : function() {}
  ]
}

require("libpath/lib.js");
require("libpath/lib");

• by a custom resolve plugin

see #79

---

PS: Try to no use the script-loader. Use the imports-loader and the exports-loader like described here.

[flosse]

@sokra Thanks for your reply!
Unfortunately i doesn't work :( But this starts with the imports-loader. Here is my config:

webpack = require "webpack"

module.exports =
  entry: './src/index.coffee'
  target: "web"
  cache: yes
  watch: false
  module:
    loaders: [
      { test: /\.coffee$/, loader: "coffee-loader"                          }
      { test: /\.css$/,    loader: "style-loader!css-loader"                }
      { test: /\.styl$/,   loader: "style-loader!css-loader!stylus-loader"  }
    ]
    noParse: /\.min\.js/
  output:
    filename: "./www/app.js"
  resolve:
    extensions: ["", ".js", ".coffee"]
    modulesDirectories: ['bower_components', 'node_modules']
    alias:
      react:    "react/react.js"
      fluxxor:  "fluxxor/build/fluxxor.js"
  plugins: [
    new webpack.ProvidePlugin
      React:    "react"
      Fluxxor:  "fluxxor"
  ]

and this is part of the result:

WARNING in ./bower_components/react/react.js
Critical dependencies:
4:396-397 require function is used in a way, in which dependencies cannot be statically extracted
4:405-406 require function is used in a way, in which dependencies cannot be statically extracted
 @ ./bower_components/react/react.js 4:396-397 4:405-406

WARNING in ./bower_components/react/bower.json
Module parse failed: /home/mk/dev/med-app-prototype/bower_components/react/bower.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "react",
|   "version": "0.10.0",
|   "main": "react.js"
 @ ./bower_components/react ^\.\/.*$

so where should I start?

[flosse]

now It works in a totally different way:
First of all not parsing the bower_compontents seems to solve some of the problems:

noParse:[
       /\.min\.js/
       path.join __dirname, bowerPath
    ]

To replace the filename, I just change the alias like this:

if gulp.env.production
   conf.resolve.alias.react = "react/react.min"

now (almost) everything works like expected.
Anyway, would you mind to paste a modified config of my ones? I'd like to know how it is intended by webpack (I'm interested in the "by replacement" part).

[sokra]

Here is how it works with react: webpack/webpack-with-common-libs@617e775

• You shouldn't use precompiled libraries. Just use the react package from npm.
• You don't need to use the minimized library for production. Just use the normal one. webpack minimizes.
• Prefer npm packages over bower packages. npm packages are more likely commonjs.

For react you can use this plugin for production. It reduces the size of the react lib to ~95kb (yes thats less than the prebuild minimized react.min.js in the bower package).

new webpack.DefinePlugin({
  "process.env": {
    NODE_ENV: JSON.stringify("production")
  }
});

[nelix]

sokra: does that DefinePlugin function like envify? making it easier for uglify remove the check?

[dashed]

@nelix I think DefinePlugin is a generalization of envify. envify seem to only replace process.env.<key> in source code. Plus, as a bonus, DefinePlugin can override return values of typeof call statements.