webpack 1
import webpack from 'webpack'
import cssnano from 'cssnano'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import config from '../config'
import _debug from 'debug'
const debug = _debug('app:webpack:config')
const paths = config.utils_paths
const {__DEV__, __PROD__, __TEST__} = config.globals
debug('Create configuration.')
const webpackConfig = {
name: 'client',
target: 'web',
devtool: config.compiler_devtool,
resolve: {
root: [
paths.client(),
paths.shared()
],
extensions: ['', '.js', '.jsx', '.json']
},
module: {}
}
// ------------------------------------
// Entry Points
// ------------------------------------
const APP_ENTRY_PATHS = [
'babel-polyfill',
'whatwg-fetch',
paths.client('main.js')
]
webpackConfig.entry = {
app: __DEV__
? APP_ENTRY_PATHS.concat(`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`)
: APP_ENTRY_PATHS,
vendor: config.compiler_vendor
}
// ------------------------------------
// Bundle Output
// ------------------------------------
webpackConfig.output = {
filename: `[name].[${config.compiler_hash_type}].js`,
path: paths.dist(),
publicPath: config.compiler_public_path
}
// ------------------------------------
// Plugins
// ------------------------------------
webpackConfig.plugins = [
new webpack.DefinePlugin(config.globals),
new HtmlWebpackPlugin({
template: paths.client('index.html'),
hash: false,
favicon: paths.client('static/favicon.ico'),
filename: 'index.html',
inject: false,
minify: {
collapseWhitespace: true
},
// NOTE: ADD ESRI / DOJO Default Configurations here ...
dojoConfig: JSON.stringify({
})
})
]
if (__DEV__) {
debug('Enable plugins for live development (HMR, NoErrors).')
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
)
} else if (__PROD__) {
debug('Enable plugins for production (OccurenceOrder, Dedupe & UglifyJS).')
webpackConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
unused: true,
dead_code: true,
warnings: false
}
})
)
}
// Don't split bundles during testing, since we only want import one bundle
if (!__TEST__) {
webpackConfig.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
)
}
// ------------------------------------
// Pre-Loaders
// ------------------------------------
/*
[ NOTE ]
We no longer use eslint-loader due to it severely impacting build
times for larger projects. `npm run lint` still exists to aid in
deploy processes (such as with CI), and it's recommended that you
use a linting plugin for your IDE in place of this loader.
If you do wish to continue using the loader, you can uncomment
the code below and run `npm i --save-dev eslint-loader`. This code
will be removed in a future release.
webpackConfig.module.preLoaders = [{
test: /\.(js|jsx)$/,
loader: 'eslint',
exclude: /node_modules/
}]
webpackConfig.eslint = {
configFile: paths.base('.eslintrc'),
emitWarning: __DEV__
}
*/
// ------------------------------------
// Loaders
// ------------------------------------
// JavaScript / JSON
webpackConfig.module.loaders = [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
plugins: ['transform-runtime', 'recharts'],
presets: ['es2015', 'react', 'stage-0'],
env: {
production: {
}
}
}
},
{
test: /\.json$/,
loader: 'json'
}]
// ------------------------------------
// Style Loaders
// ------------------------------------
// We use cssnano with the postcss loader, so we tell
// css-loader not to duplicate minimization.
const BASE_CSS_LOADER = 'css?modules&sourceMap&-minimize'
// Add any packge names here whose styles need to be treated as CSS modules.
// These paths will be combined into a single regex.
const PATHS_TO_TREAT_AS_CSS_MODULES = [
'flexboxgrid'
]
// If config has CSS modules enabled, treat this project's styles as CSS modules.
if (config.compiler_css_modules) {
PATHS_TO_TREAT_AS_CSS_MODULES.push(
paths.client().replace(/[\^\$\.\*\+\-\?\=\!\:\|\\\/\(\)\[\]\{\}\,]/g, '\\$&') // eslint-disable-line
)
}
const isUsingCSSModules = !!PATHS_TO_TREAT_AS_CSS_MODULES.length
const cssModulesRegex = new RegExp(`(${PATHS_TO_TREAT_AS_CSS_MODULES.join('|')})`)
// Loaders for styles that need to be treated as CSS modules.
if (isUsingCSSModules) {
const cssModulesLoader = [
BASE_CSS_LOADER,
'modules',
'importLoaders=1',
'localIdentName=[name]__[local]___[hash:base64:5]'
].join('&')
webpackConfig.module.loaders.push({
test: /\.scss$/,
include: cssModulesRegex,
loaders: [
'style',
cssModulesLoader,
'postcss',
'sass?sourceMap'
]
})
webpackConfig.module.loaders.push({
test: /\.css$/,
include: cssModulesRegex,
loaders: [
'style',
cssModulesLoader,
'postcss'
]
})
}
// Loaders for files that should not be treated as CSS modules.
const excludeCSSModules = isUsingCSSModules ? cssModulesRegex : false
webpackConfig.module.loaders.push({
test: /\.scss$/,
exclude: excludeCSSModules,
loaders: [
'style',
BASE_CSS_LOADER,
'postcss',
'sass?sourceMap'
]
})
webpackConfig.module.loaders.push({
test: /\.css$/,
exclude: excludeCSSModules,
loaders: [
'style',
BASE_CSS_LOADER,
'postcss'
]
})
// ------------------------------------
// Style Configuration
// ------------------------------------
webpackConfig.sassLoader = {
includePaths: 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
})
]
// File loaders
/* eslint-disable */
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|gif)$/, loader: 'url?limit=8192' }
)
/* eslint-enable */
/* Configure Webpack to ignore dojo modules */
webpackConfig.module.externals = [
function(context, request, callback) {
if (/^dojo/.test(request) ||
/^dojox/.test(request) ||
/^dijit/.test(request) ||
/^esri/.test(request)
) {
return callback(null, "amd " + request);
}
callback();
}
];
// ------------------------------------
// Finalize Configuration
// ------------------------------------
// when we don't know the public path (we know it only when HMR is enabled [in development]) we
// need to use the extractTextPlugin to fix this issue:
// http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809
if (!__DEV__) {
debug('Apply ExtractTextPlugin to CSS loaders.')
webpackConfig.module.loaders.filter((loader) =>
loader.loaders && loader.loaders.find((name) => /css/.test(name.split('?')[0]))
).forEach((loader) => {
const [first, ...rest] = loader.loaders
loader.loader = ExtractTextPlugin.extract(first, rest.join('!'))
Reflect.deleteProperty(loader, 'loaders')
})
webpackConfig.plugins.push(
new ExtractTextPlugin('[name].[contenthash].css', {
allChunks: true
})
)
}
export default webpackConfig
webpack 3（升级后）
import webpack from 'webpack'
import cssnano from 'cssnano'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import config from '../config'
import _debug from 'debug'
const debug = _debug('app:webpack:config')
const paths = config.utils_paths
const {__DEV__, __PROD__, __TEST__} = config.globals
debug('Create configuration.')
const webpackConfig = {
name: 'client',
target: 'web',
devtool: config.compiler_devtool,
resolve: {
modules: [
paths.client(),
paths.shared(),
"node_modules"
],
extensions: ['*', '.js', '.jsx', '.json']
},
module: {
rules:[]
}
}
// ------------------------------------
// Entry Points
// ------------------------------------
const APP_ENTRY_PATHS = [
'babel-polyfill',
'whatwg-fetch',
paths.client('main.js')
]
webpackConfig.entry = {
app: __DEV__
? APP_ENTRY_PATHS.concat(`webpack-hot-middleware/client?path=${config.compiler_public_path}__webpack_hmr`)
: APP_ENTRY_PATHS,
vendor: config.compiler_vendor
}
// ------------------------------------
// Bundle Output
// ------------------------------------
webpackConfig.output = {
filename: `[name].[${config.compiler_hash_type}].js`,
path: paths.dist(),
publicPath: config.compiler_public_path
}
// ------------------------------------
// Plugins
// ------------------------------------
webpackConfig.plugins = [
new webpack.DefinePlugin(config.globals),
new HtmlWebpackPlugin({
template: paths.client('index.html'),
hash: false,
favicon: paths.client('static/favicon.ico'),
filename: 'index.html',
inject: true,
minify: {
collapseWhitespace: true
},
// NOTE: ADD ESRI / DOJO Default Configurations here ...
dojoConfig: JSON.stringify({
})
})
]
if (__DEV__) {
debug('Enable plugins for live development (HMR, NoErrors).')
webpackConfig.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
)
} else if (__PROD__) {
debug('Enable plugins for production (OccurenceOrder, Dedupe & UglifyJS).')
webpackConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
unused: true,
dead_code: true,
warnings: false
}
})
)
}
// Don't split bundles during testing, since we only want import one bundle
if (!__TEST__) {
webpackConfig.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
)
}
// ------------------------------------
// Pre-Loaders
// ------------------------------------
/*
[ NOTE ]
We no longer use eslint-loader due to it severely impacting build
times for larger projects. `npm run lint` still exists to aid in
deploy processes (such as with CI), and it's recommended that you
use a linting plugin for your IDE in place of this loader.
If you do wish to continue using the loader, you can uncomment
the code below and run `npm i --save-dev eslint-loader`. This code
will be removed in a future release.
webpackConfig.module.preLoaders = [{
test: /\.(js|jsx)$/,
loader: 'eslint',
exclude: /node_modules/
}]
webpackConfig.eslint = {
configFile: paths.base('.eslintrc'),
emitWarning: __DEV__
}
*/
// ------------------------------------
// Loaders
// ------------------------------------
// JavaScript / JSON
webpackConfig.module.rules = [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader:'babel-loader',
query: {
cacheDirectory: true,
plugins: ['babel-plugin-transform-runtime', 'recharts'],
presets: ['es2015', 'react', 'stage-0'],
env: {
production: {
}
}
}}]
}]
// ------------------------------------
// Style Loaders
// ------------------------------------
// We use cssnano with the postcss loader, so we tell
// css-loader not to duplicate minimization.
const BASE_CSS_LOADER = 'css?modules&sourceMap&-minimize'
// Add any packge names here whose styles need to be treated as CSS modules.
// These paths will be combined into a single regex.
const PATHS_TO_TREAT_AS_CSS_MODULES = [
'flexboxgrid'
]
// If config has CSS modules enabled, treat this project's styles as CSS modules.
if (config.compiler_css_modules) {
PATHS_TO_TREAT_AS_CSS_MODULES.push(
paths.client().replace(/[\^\$\.\*\+\-\?\=\!\:\|\\\/\(\)\[\]\{\}\,]/g, '\\$&') // eslint-disable-line
)
}
const isUsingCSSModules = !!PATHS_TO_TREAT_AS_CSS_MODULES.length
const cssModulesRegex = new RegExp(`(${PATHS_TO_TREAT_AS_CSS_MODULES.join('|')})`)
// Loaders for styles that need to be treated as CSS modules.
if (isUsingCSSModules) {
/* const cssModulesLoader = [
BASE_CSS_LOADER,
'modules',
'importLoaders=1',
'localIdentName=[name]__[local]___[hash:base64:5]'
].join('&') */
/* webpackConfig.module.rules.push({
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
importLoaders: 1 ,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}) */
webpackConfig.module.rules.push({
test: /\.scss$/,
include: cssModulesRegex,
use: [
'style-loader',
{ loader: 'css-loader',
query: {
modules: true,
importLoaders: 1 ,
localIdentName: '[name]__[local]___[hash:base64:5]'
} },
{loader: 'postcss-loader'},
{
loader: "sass-loader",
query: {
includePaths: [paths.client('styles')]
}
},
]
})
webpackConfig.module.rules.push({
test: /\.css$/,
include: cssModulesRegex,
use: [
'style-loader',
{ loader: 'css-loader',
query: {
modules: true,
importLoaders: 1 ,
localIdentName: '[name]__[local]___[hash:base64:5]'
} },
{loader: 'postcss-loader'}
]
})
}
// Loaders for files that should not be treated as CSS modules.
const excludeCSSModules = isUsingCSSModules ? cssModulesRegex : false
webpackConfig.module.rules.push({
test: /\.scss$/,
exclude: excludeCSSModules,
use: [
'style-loader',
{ loader: 'css-loader',
query: {
modules: true,
importLoaders: 1 ,
localIdentName: '[name]__[local]___[hash:base64:5]'
} },
{loader: 'postcss-loader'},
{
loader: "sass-loader",
query: {
includePaths: [paths.client('styles')]
}
},
]
})
webpackConfig.module.rules.push({
test: /\.css$/,
exclude: excludeCSSModules,
use: [
'style-loader',
{ loader: 'css-loader',
query: {
modules: true,
importLoaders: 1 ,
localIdentName: '[name]__[local]___[hash:base64:5]'
} },
{loader: 'postcss-loader',
options: {
plugins: () => {
return [
require('cssnano')({
autoprefixer: true
})
]
}
}
}
]
})
// ------------------------------------
// Style Configuration
// ------------------------------------
/* webpackConfig.plugins.postcss.push({
require('cssnano')().
require('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 ({
'sass-loader':{
includePaths: paths.client('styles'),
sourceMap:true
}
}) */
/* webpackConfig.plugins.push({
'postcss-cssnano':{
}
//includePaths: paths.client('styles')
}) */
webpackConfig.plugins = [
cssnano({
preset: 'default',
autoprefixer: {
add: true,
remove: true,
browsers: ['last 2 versions']
},
discardComments: {
removeAll: true
},
discardUnused: false,
mergeIdents: false,
reduceIdents: false,
safe: true,
sourcemap: true
})
]
// File loaders
/* eslint-disable */
// Images
// ------------------------------------
webpackConfig.module.rules.push({
test : /\.(png|jpg|gif)$/,
loader : 'url-loader',
options : {
limit : 8192
}
});
// Fonts
// ------------------------------------
;[
['woff', 'application/font-woff'],
['woff2', 'application/font-woff2'],
['otf', 'font/opentype'],
['ttf', 'application/octet-stream'],
['eot', 'application/vnd.ms-fontobject'],
['svg', 'image/svg+xml'],
].forEach((font) => {
const extension = font[0];
const mimetype = font[1];
webpackConfig.module.rules.push({
test : new RegExp(`\\.${extension}$`),
loader : 'url-loader',
options : {
name : 'fonts/[name].[ext]',
limit : 10000,
mimetype
}
});
});
/* eslint-enable */
/* Configure Webpack to ignore dojo modules */
/* webpackConfig.module.externals = [
function(context, request, callback) {
if (/^dojo/.test(request) ||
/^dojox/.test(request) ||
/^dijit/.test(request) ||
/^esri/.test(request)
) {
return callback(null, "amd " + request);
}
callback();
}
]; */
// ------------------------------------
// Finalize Configuration
// ------------------------------------
// when we don't know the public path (we know it only when HMR is enabled [in development]) we
// need to use the extractTextPlugin to fix this issue:
// http://stackoverflow.com/questions/34133808/webpack-ots-parsing-error-loading-fonts/34133809#34133809
if (!__DEV__) {
debug('Apply ExtractTextPlugin to CSS loaders.')
webpackConfig.module.loaders.filter((loader) =>
loader.loaders && loader.loaders.find((name) => /css/.test(name.split('?')[0]))
).forEach((loader) => {
const [first, ...rest] = loader.loaders
loader.loader = ExtractTextPlugin.extract(first, rest.join('!'))
Reflect.deleteProperty(loader, 'loader')
})
webpackConfig.plugins.push(
new ExtractTextPlugin('[name].[contenthash].css', {
allChunks: true
})
)
}
export default webpackConfig
样本错误 发生错误 ./node_modules/css-loader??ref--2-1!./node_modules/postcss-loader/src!./node_modules/flexboxgrid2/flexboxgrid2.css 模块构建失败：错误：在D：\ current中找不到PostCSS Config 项目\ DOCTC16 \ doctc \ node_modules \ flexboxgrid2 然后在config.load.then（D：\当前项目\ DOCTC16 \ doctc \ node_modules \ postcss-load-config \ src \ index.js：55：15） 在@ ./node_modules/flexboxgrid2/flexboxgrid2.css 4：14-109 @ ./node_modules/react-flexbox-grid/lib/classNames.js @ ./node_modules/react-flexbox-grid/lib/components/Grid.js @ ./node_modules/react-flexbox-grid/lib/index.js @ ./src/routes/Devices/components/swapdevice.js @ ./src/routes/Devices/containers/SwapContainer.js @ ./src/routes/Devices/containers/DevicesContainer.js @ ./src/routes/Devices/containers/DevicesPage.js @ ./src/routes/Devices/index.js @ ./src/routes/index.js @ ./src/main.js @ multi babel-polyfill whatwg-fetch ./src/main.js webpack-hot-middleware / client？path = http://10.203.214.174:3000/__webpack_hmr