New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

require libs for production bundle #292

Closed
flosse opened this Issue May 31, 2014 · 6 comments

Comments

Projects
None yet
4 participants
@flosse

flosse commented May 31, 2014

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

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra May 31, 2014

Member

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.

Member

sokra commented May 31, 2014

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

This comment has been minimized.

Show comment
Hide comment
@flosse

flosse Jun 1, 2014

@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 commented Jun 1, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@flosse

flosse Jun 1, 2014

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).

flosse commented Jun 1, 2014

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

This comment has been minimized.

Show comment
Hide comment
@sokra

sokra Jun 2, 2014

Member

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")
  }
});
Member

sokra commented Jun 2, 2014

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

This comment has been minimized.

Show comment
Hide comment
@nelix

nelix Jul 4, 2014

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

nelix commented Jul 4, 2014

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

@dashed

This comment has been minimized.

Show comment
Hide comment
@dashed

dashed Jul 4, 2014

Contributor

@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.

Contributor

dashed commented Jul 4, 2014

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment