Skip to content
This repository has been archived by the owner on Sep 11, 2018. It is now read-only.

upgrade webpack from 1 to 2 #1189

Closed
wants to merge 16 commits into from
3 changes: 2 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"key-spacing" : 0,
"jsx-quotes" : [2, "prefer-single"],
"max-len" : [2, 120, 2],
"object-curly-spacing" : [2, "always"]
"object-curly-spacing" : [2, "always"],
"no-undef" : 1
}
}
6 changes: 3 additions & 3 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ language: node_js
node_js:
- "6"

cache:
directories:
- node_modules
# cache:
# directories:
# - node_modules

install:
- npm install -g yarn
Expand Down
2 changes: 1 addition & 1 deletion config/environments.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ module.exports = {
compiler_public_path : '/',
compiler_fail_on_warning : false,
compiler_hash_type : 'chunkhash',
compiler_devtool : null,
compiler_devtool : false,
compiler_stats : {
chunks : true,
chunkModules : true,
Expand Down
16 changes: 11 additions & 5 deletions config/karma.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const karmaConfig = {
browsers : ['PhantomJS'],
webpack : {
devtool : 'cheap-module-source-map',
entry: './tests/test-bundler.js',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be ./${project.dir_test}/test-bundler.js like on line 11 of this file

resolve : Object.assign({}, webpackConfig.resolve, {
alias : Object.assign({}, webpackConfig.resolve.alias, {
sinon : 'sinon/pkg/sinon.js'
Expand All @@ -33,10 +34,15 @@ const karmaConfig = {
noParse : [
/\/sinon\.js/
],
loaders : webpackConfig.module.loaders.concat([
rules : webpackConfig.module.rules.concat([
{
test : /sinon(\\|\/)pkg(\\|\/)sinon\.js/,
loader : 'imports?define=>false,require=>false'

loader : 'imports-loader'
// options: {
// define: false,
// require: false
// }
}
])
},
Expand All @@ -59,15 +65,15 @@ const karmaConfig = {

if (project.globals.__COVERAGE__) {
karmaConfig.reporters.push('coverage')
karmaConfig.webpack.module.preLoaders = [{
karmaConfig.webpack.module.rules.push({
test : /\.(js|jsx)$/,
include : new RegExp(project.dir_client),
exclude : /node_modules/,
loader : 'babel',
loader : 'babel-loader',
query : Object.assign({}, project.compiler_babel, {
plugins : (project.compiler_babel.plugins || []).concat('istanbul')
})
}]
})
}

module.exports = (cfg) => cfg.set(karmaConfig)
225 changes: 159 additions & 66 deletions config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,15 @@ const __TEST__ = project.globals.__TEST__

debug('Creating configuration.')
const webpackConfig = {
name : 'client',
target : 'web',
devtool : project.compiler_devtool,
resolve : {
root : project.paths.client(),
extensions : ['', '.js', '.jsx', '.json']
name: 'client',
target: 'web',
devtool: project.compiler_devtool,
resolve: {
modules: [
project.paths.client(),
'node_modules'
],
extensions: ['.js', '.jsx', '.json']
},
module : {}
}
Expand Down Expand Up @@ -84,21 +87,22 @@ if (__TEST__ && !argv.watch) {
}

if (__DEV__) {
debug('Enabling plugins for live development (HMR, NoErrors).')
debug('Enabling plugins for live development (HMR, NoEmitOnErrors).')
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
new webpack.NoEmitOnErrorsPlugin()
)
} else if (__PROD__) {
debug('Enabling plugins for production (OccurenceOrder, Dedupe & UglifyJS).')
webpackConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress : {
unused : true,
dead_code : true,
warnings : false
dead_code : true
// warnings : false
}
}),
new webpack.optimize.AggressiveMergingPlugin()
Expand All @@ -118,75 +122,159 @@ if (!__TEST__) {
// Loaders
// ------------------------------------
// JavaScript / JSON
webpackConfig.module.loaders = [{
webpackConfig.module.rules = [{
test : /\.(js|jsx)$/,
exclude : /node_modules/,
loader : 'babel',
loader : 'babel-loader',
query : project.compiler_babel
}, {
test : /\.json$/,
loader : 'json'
loader : 'json-loader'
}]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can eliminate this. JSON loader is built-in in Webpack 2.


// ------------------------------------
// Style Loaders
// ------------------------------------
// We use cssnano with the postcss loader, so we tell
// css-loader not to duplicate minimization.
const BASE_CSS_LOADER = 'css?sourceMap&-minimize'

webpackConfig.module.loaders.push({
test : /\.scss$/,
exclude : null,
loaders : [
'style',
BASE_CSS_LOADER,
'postcss',
'sass?sourceMap'
webpackConfig.module.rules.push({
test : /\.scss$/,
use : [
{
loader: 'style-loader'
},
{
loader : 'css-loader',
options : {
sourceMap : true,
minimize : true
}
},
{
loader : 'postcss-loader'
},
{
loader : 'sass-loader',
options : {
sourceMap : true
}
}
]
})
webpackConfig.module.loaders.push({
test : /\.css$/,
exclude : null,
loaders : [
'style',
BASE_CSS_LOADER,
'postcss'
webpackConfig.module.rules.push({
test : /\.css$/,
use : [
{
loader : 'style-loader'
},
{
loader : 'css-loader',
options : {
sourceMap : true,
minimize : true
}
},
{
loader : 'postcss-loader'
}
]
})

webpackConfig.sassLoader = {
includePaths : project.paths.client('styles')
}

webpackConfig.postcss = [
cssnano({
autoprefixer : {
add : true,
remove : true,
browsers : ['last 2 versions']
},
discardComments : {
removeAll : true
},
discardUnused : false,
mergeIdents : false,
reduceIdents : false,
safe : true,
sourcemap : true
webpackConfig.plugins.push(
new webpack.LoaderOptionsPlugin({
options : {
postcss : [
cssnano({
autoprefixer : {
add : true,
remove : true,
browsers : ['last 2 versions']
},
discardComments: {
removeAll : true
},
discardUnused : false,
mergeIdents : false,
reduceIdents : false,
safe : true,
sourcemap : true
})
],
sassLoader : {
includePaths : project.paths.client('styles')
}
}
})
]
)

// File loaders
/* eslint-disable */
Copy link
Contributor

@matgessel matgessel May 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can eliminate the eslint-disable; it was there for the compact loader definitions.

Copy link
Contributor

@matgessel matgessel May 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Less boilerplate:

const FONT_EXTS = new Map([
  ['woff', 'application/font-woff'],
  ['woff2', 'application/font-woff2'],
  ['otf', 'font/opentype'],
  ['ttf', 'application/octet-stream'],
  ['eot', 'application/vnd.ms-fontobject'],
  ['svg', 'image/svg+xml'],
]);
for (let [extension, mimeType] of FONT_EXTS) {
  webpackConfig.module.rules.push({
    test    : new RegExp(`\\.${extension}(\\?.*)?$`),
    loader  : 'url-loader',
    options : {
      name     : 'fonts/[name].[ext]',
      limit    : '10000',
      mimetype : mimeType,
    },
  });
};
webpackConfig.module.rules.push(
  {
    test    : /\.(png|jpg|gif)$/,
    loader  : 'url-loader',
    options : {
      limit    : '8192',
    },
  },
);

Note addition of .gif
Also note that file-loader does not support limit, so I assumed url-loader was intended.
I haven't tested this code yet.

webpackConfig.module.loaders.push(
{ test: /\.woff(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff' },
{ test: /\.woff2(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2' },
{ test: /\.otf(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype' },
{ test: /\.ttf(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream' },
{ test: /\.eot(\?.*)?$/, loader: 'file?prefix=fonts/&name=[path][name].[ext]' },
{ test: /\.svg(\?.*)?$/, loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml' },
{ test: /\.(png|jpg)$/, loader: 'url?limit=8192' }
webpackConfig.module.rules.push(
{
test : /\.woff(\?.*)?$/,
loader : 'url-loader',
options : {
prefix : 'fonts/',
name : '[path][name].[ext]',
limit : '10000',
mimetype : 'application/font-woff'
}
},
{
test : /\.woff2(\?.*)?$/,
loader : 'url-loader',
options : {
prefix : 'fonts/',
name : '[path][name].[ext]',
limit : '10000',
mimetype : 'application/font-woff2'
}
},
{
test : /\.otf(\?.*)?$/,
loader : 'file-loader',
options : {
prefix : 'fonts/',
name : '[path][name].[ext]',
limit : '10000',
mimetype : 'font/opentype'
}
},
{
test : /\.ttf(\?.*)?$/,
loader : 'url-loader',
options : {
prefix : 'fonts/',
name : '[path][name].[ext]',
limit : '10000',
mimetype : 'application/octet-stream'
}
},
{
test : /\.eot(\?.*)?$/,
loader : 'file-loader',
options : {
prefix : 'fonts/',
name : '[path][name].[ext]'
}
},
{
test : /\.svg(\?.*)?$/,
loader : 'url-loader',
options : {
prefix : 'fonts/',
name : '[path][name].[ext]',
limit : '10000',
mimetype : 'image/svg+xml'
}
},
{
test : /\.(png|jpg)$/,
loader : 'url-loader',
options : {
limit : '8192'
}
}
)
/* eslint-enable */

Expand All @@ -198,17 +286,22 @@ webpackConfig.module.loaders.push(
// http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809
if (!__DEV__) {
debug('Applying ExtractTextPlugin to CSS loaders.')
webpackConfig.module.loaders.filter((loader) =>
loader.loaders && loader.loaders.find((name) => /css/.test(name.split('?')[0]))
).forEach((loader) => {
const first = loader.loaders[0]
const rest = loader.loaders.slice(1)
loader.loader = ExtractTextPlugin.extract(first, rest.join('!'))
delete loader.loaders
webpackConfig.module.rules.filter(rule =>
rule.loader && /css/.test(rule.loader)
).forEach(loader => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isn't it a misspell here?

...
  ).forEach(rule => {
...

const first = rule.loader
const rest = rule.loader.slice(1)

rule.loader = ExtractTextPlugin.extract({
fallback: first,
use: rest.join('!')
})
delete rule.loader
})

webpackConfig.plugins.push(
new ExtractTextPlugin('[name].[contenthash].css', {
new ExtractTextPlugin({
filename : '[name].[contenthash].css',
allChunks : true
})
)
Expand Down
Loading