-
Notifications
You must be signed in to change notification settings - Fork 2.2k
upgrade webpack from 1 to 2 #1189
Changes from all commits
49526b1
455d4a6
726f581
e394cff
36388bd
4c1d76d
82662ae
dd3fb63
6e35f56
cb73f20
8627411
fcb8279
0c700fa
0a99ada
714a162
dab9d97
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 : {} | ||
} | ||
|
@@ -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(), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Probably should remove the DedupePlugin? https://webpack.js.org/guides/migrating/#dedupeplugin-has-been-removed |
||
new webpack.optimize.UglifyJsPlugin({ | ||
sourceMap: true, | ||
compress : { | ||
unused : true, | ||
dead_code : true, | ||
warnings : false | ||
dead_code : true | ||
// warnings : false | ||
} | ||
}), | ||
new webpack.optimize.AggressiveMergingPlugin() | ||
|
@@ -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' | ||
}] | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 */ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we can eliminate the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Less boilerplate:
Note addition of .gif |
||
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 */ | ||
|
||
|
@@ -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 => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. isn't it a misspell here?
|
||
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 | ||
}) | ||
) | ||
|
There was a problem hiding this comment.
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