Skip to content

Instantly share code, notes, and snippets.

@jackypan1989
Last active September 21, 2017 08:16
Show Gist options
  • Save jackypan1989/a832db223a8d4a24d2edd9b6cde83da3 to your computer and use it in GitHub Desktop.
Save jackypan1989/a832db223a8d4a24d2edd9b6cde83da3 to your computer and use it in GitHub Desktop.
webpack migration (from v1 to v3)
const path = require('path')
const theme = {
'@form-item-margin-bottom': '12px',
'@layout-body-background': '#ffffff'
}
module.exports = {
resolve: {
modules: [
path.join(__dirname, 'src'),
'node_modules'
]
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'react', 'stage-0'],
plugins: [
'react-hot-loader/babel',
['import', {
libraryName: 'antd',
style: 'css'
}]
]
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', `less-loader?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`]
}
]
}
}
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.config.common')
module.exports = merge(common, {
devtool: 'cheap-module-eval-source-map',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
path.join(__dirname, 'src/client/index')
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'http://localhost:3000/build/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
})
const path = require('path')
const webpack = require('webpack')
const theme = {
'@form-item-margin-bottom': '12px',
'@layout-body-background': '#ffffff'
}
const publicPath = 'http://localhost:3000/build/'
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
path.join(__dirname, 'src/client/index')
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: publicPath
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
resolve: {
alias: {
'react': path.join(__dirname, 'node_modules', 'react')
},
extensions: ['', '.js']
},
resolveLoader: {
'fallback': path.join(__dirname, 'node_modules')
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
include: __dirname,
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: [
'react-hot-loader/babel',
['import', {
libraryName: 'antd',
libraryDirectory: 'lib',
style: true
}]
]
}
}, {
test: /\.css?$/,
loaders: ['style', 'css'],
include: __dirname
}, {
test: /\.less$/,
loaders: ['style', 'css', `less?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`],
include: __dirname
}]
}
}
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.config.common')
module.exports = merge(common, {
devtool: 'source-map',
entry: [
path.join(__dirname, 'src/client/index')
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin()
]
})
const path = require('path')
const webpack = require('webpack')
const theme = {
'@form-item-margin-bottom': '12px',
'@layout-body-background': '#ffffff'
}
module.exports = {
devtool: 'source-map',
entry: [
path.join(__dirname, 'src/client/index')
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {
alias: {
'react': path.join(__dirname, 'node_modules', 'react')
},
extensions: ['', '.js']
},
resolveLoader: {
'fallback': path.join(__dirname, 'node_modules')
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: function (path) {
// 路徑中含有 node_modules 的就不去解析。
var isNpmModule = !!path.match(/node_modules/)
return isNpmModule
},
include: __dirname,
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: [
['import', {
libraryName: 'antd',
libraryDirectory: 'lib',
style: true
}]
]
}
}, {
test: /\.css?$/,
loaders: ['style', 'css'],
include: __dirname
}, {
test: /\.less$/,
loaders: ['style', 'css', `less?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`],
include: __dirname
}]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment