从Webpack 1迁移到Webpack 2并在尝试构建项目时出错：
C:\..\node_modules\webpack\lib\webpack.js:19
throw new
WebpackOptionsValidationError(webpackOptionsValidationErrors);
^
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'postcss'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, record
sPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
For typos: please correct them.
For loader options: webpack 2 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
postcss: ...
}
})
]
at webpack (C:\..\node_modules\webpack\lib\webpack.js:19:9)
at Object.<anonymous> (C:\..\webpack.devserver.js:8:18)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Function.Module.runMain (module.js:676:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
我已经不知道还需要做什么。如果有人知道如何解决这个问题，我真的很感激！
我有以下结构：
- client
- node_modules
- webpack.config.babel
-- index.js
-- webpack.loaders.js
-- webpack.plugins.js
-- webpack.postcss.js
- .babelrc
- webpack.config.js
- webpack.devserver.js
webpack.loaders.js：
import {extractTextPlugin} from './webpack.plugins';
const DEV = global.buildOptions.dev;
const appJsLoader = {
test: /\.js$/,
use: [
{
loader: 'ng-annotate-loader'
},
{
loader: 'babel-loader'
}],
include: /client/,
exclude: [/3rd-party/, /node_modules/],
};
const ejsLoader = {
test: /\.ejs$/,
loader: 'ejs-loader'
};
const rawJsLoader = {
test: /\.js$/,
use: [],
include: [/3rd-party/, /node_modules/],
exclude: /client/
};
const thirdPartyStyleLoader = {
test: /\.css$/,
include: [/node_modules/],
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } }
]
})
};
const thirdPartyStyleLoaderMDI = {
test: /\.css$/,
include: [/3rd-party/],
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } }
]
})
};
const commonStyleLoader = {
test: /\.css$/,
include: /client/,
exclude: [/3rd-party/, /node_modules/],
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
})
};
const imagesLoader = {
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url-loader?name=[name].[ext]'
};
const sassLoader = {
test: /\.scss$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader', 'sass-loader'
]
})
};
const HTMLLoader = {
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader?attrs[]=md-icon:md-svg-src'
};
export default [
appJsLoader,
rawJsLoader,
ejsLoader,
thirdPartyStyleLoader,
thirdPartyStyleLoaderMDI,
commonStyleLoader,
HTMLLoader,
imagesLoader,
sassLoader,
{
test: /\.woff$/,
loader: 'url?limit=65000&mimetype=application/font-woff&name=[name].[ext]'
},
{
test: /\.woff2$/,
loader: 'url?limit=65000&mimetype=application/font-woff2&name=[name].[ext]'
},
{
test: /\.[ot]tf$/,
loader: 'url?limit=65000&mimetype=application/octet-stream&name=[name].[ext]'
},
{
test: /\.eot$/,
loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=[name].[ext]'}
];
webpack.plugins.js：
import webpack, { optimize } from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
const DEV = global.buildOptions.dev;
const globals = {
__ENV__: `"${global.buildOptions.env}"`,
__DEV__: String(DEV),
__DESKTOP__: !!global.buildOptions.desktop,
__API_URL__: JSON.stringify(global.buildOptions.publicPath || '/')
};
const devPlugins = [
new webpack.NoErrorsPlugin()
];
// export const extractTextPlugin = new ExtractTextPlugin('[name].css');
export const extractTextPlugin = new ExtractTextPlugin({
filename: '[name].css'
// disable: false,
// allChunks: true
});
const prodPlugins = [
extractTextPlugin,
new optimize.UglifyJsPlugin({
mangle: false
}),
// new optimize.DedupePlugin(),
new optimize.AggressiveMergingPlugin()
];
export default [
new webpack.DefinePlugin(globals),
new HtmlWebpackPlugin({
favicon: './client/app/assets/icons/ngb-logo.png',
template: './client/index.html.ejs',
inject: 'body'
}),
function () { // sets build to failure if a compilation error occurred
this.plugin("done", function (stats) {
if (stats.compilation.errors && stats.compilation.errors.length) {
console.log(stats.compilation.errors);
process.exit(1);
}
});
},
...(DEV ? devPlugins : prodPlugins)
];
index.js：
import path from 'path';
import loaders from './webpack.loaders';
export {default as plugins} from './webpack.plugins';
export {default as postcss} from './webpack.postcss';
const DEV = global.buildOptions.dev;
export const context = path.resolve(__dirname, '../');
export const entry = (() => {
const items = {
app: [
'expose?$!jquery',
'expose?jQuery!jquery',
'./client/babel-polyfill-custom.js',
'jquery-mousewheel',
'babel-polyfill',
'./client/app/app.js'
]
};
return items;
})();
export const output = {
path: path.resolve(context, 'dist'),
publicPath: global.buildOptions.publicPath || '/',
// desktopBuild: !!global.buildOptions.desktop,
filename: '[name].bundle.js',
chunkFilename: '[id].[name].js'
};
export const resolve = {
alias: {
'pixi.js': 'pixi.js/bin/pixi.js',
}
};
export const devtool = DEV ? 'source-map' : undefined;
export const module = {rules: loaders};
export const cache = DEV;
webpack.postcss.js：
const DEV = global.buildOptions.dev;
export default [
require('postcss-import')(),
require('postcss-cssnext')({
browsers: DEV
? ['Chrome >= 45']
: [
'Android 2.3',
'Android >= 4',
'Chrome >= 20',
'Firefox >= 24',
'Explorer >= 10',
'iOS >= 6',
'Opera >= 12',
'Safari >= 6'
]
})
]
.babelrc：
{
"presets": [["es2015", { "modules": false }], "node8"],
"plugins": ["syntax-flow", "transform-flow-strip-types", "add-module-exports"]
}
package.json中的devDependencies：
"devDependencies": {
"babel-core": "6.26.0",
"babel-eslint": "8.0.3",
"babel-loader": "^7.1.2",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-syntax-flow": "^6.18.0",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-node8": "^1.2.0",
"babel-preset-stage-0": "^6.24.1",
"babel-regenerator-runtime": "latest",
"babel-register": "latest",
"core-js": "2.4.0",
"css-loader": "^0.28.7",
"ejs-loader": "0.2.1",
"eslint": "^3.9.1",
"eslint-loader": "1.9.0",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-flow-vars": "^0.4.0",
"eslint-plugin-flowtype": "^2.40.1",
"expose-loader": "^0.7.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.8.5",
"html-loader": "0.5.1",
"html-webpack-plugin": "^2.30.1",
"intl": "1.2.5",
"lodash": "^3.10.1",
"minimist": "latest",
"ng-annotate-loader": "0.6.1",
"node-sass": "^4.7.2",
"null-loader": "^0.1.1",
"postcss-cssnext": "3.0.2",
"postcss-import": "11.0.0",
"postcss-loader": "^2.0.9",
"postcss-normalize": "4.0.0",
"pug-loader": "^2.3.0",
"raw-loader": "0.5.1",
"sass-lint": "^1.8.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"transform-loader": "^0.2.4",
"uglifyjs-webpack-plugin": "^1.1.4",
"url-loader": "^0.6.2",
"webpack": "^2.7.0",
"webpack-dev-server": "^2.9.5",
"worker-loader": "1.1.0"
}
webpack.config.js：
require("babel-core/register");
require('babel-polyfill');
global.buildOptions = require('minimist')(process.argv.slice(2));
global.buildOptions.dev = !global.buildOptions.prodBuild;
module.exports = require('./webpack.config.babel/');
webpack.devserver.js：
const port = 8080;
const webpack = require('webpack');
const config = require('./webpack.config');
for (const key of Object.keys(config.entry))
config.entry[key].unshift(`webpack-dev-server/client?http://localhost:${port}/`, "webpack/hot/dev-server");
config.plugins.push(new webpack.HotModuleReplacementPlugin());
const compiler = webpack(config);
const DevServer = require('webpack-dev-server');
new DevServer(compiler, {
contentBase: './dist',
hot: true,
inline: true,
quiet: false,
noInfo: false,
lazy: false,
stats: {
assets: false,
colors: true,
version: true,
hash: false,
timings: true,
chunks: false,
chunkModules: false
}
})
.listen(port, "localhost", () => console.log('webpack dev server started on http://localhost:8080'));
您应该使用名为postcss.config.js的文件来传递PostCSS的配置，只需将其放在项目的根目录下即可。纠正我，如果我错了，我在网上找不到任何webpack.postcss.js。
postcss.config.js应该是这样的：
module.exports = {
plugins: [
require('postcss-smart-import')(),
require('precss')(),
require('autoprefixer')(),
]
};
有关其他选项，请参阅PostCSS github page