我正在尝试迁移到webpack 2,我似乎无法将postcss-loader变为autoprefix。我阅读了文档,但我似乎无法找到问题。有没有人遇到这个问题?如果是这样,你能协助我解决我的问题吗?
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HTMLWebpackPlugin = require('html-webpack-plugin');
var autoprefixer = require('autoprefixer');
// development variables
const DEVELOPMENT = process.env.NODE_ENV === 'development';
const PRODUCTION = process.env.NODE_ENV === 'production';
// checks if production : development
const entry = PRODUCTION
? [
'./src/index.js'
]
: [
'./src/index.js',
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost8080',
];
const plugins = PRODUCTION
? [
new webpack.optimize.UglifyJsPlugin(),
new ExtratTextPlugin('style-[contenthash:10].css'),
new HTMLWebpackPlugin({
template: 'index-template.html'
})
]
: [
new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer(), ] } }),
new webpack.HotModuleReplacementPlugin(),
];
plugins.push(
new webpack.DefinePlugin({
DEVELOPMENT: JSON.stringify(DEVELOPMENT),
PRODUCTION: JSON.stringify(PRODUCTION),
})
);
// add class name depending on enviroment PROD | DEV
const cssIndentifier = PRODUCTION ? '[hash:base64:10]' : '[path][name]---[local]';
// inject into head in DEV and create CSS file in PROD
const cssLoader = PRODUCTION
? ExtractTextPlugin.extract({
loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
})
: ['style-loader','css-loader?localIdentName=' + cssIndentifier + ',postcss-loader'];
module.exports = {
devtool: 'source-map', //add source mapping to devtools
entry: entry,
plugins: plugins,
externals: {
jquery: 'jQuery' //jquery is external and availabe at the global variable jQuery
},
module: {
rules: [{
test: /\.js$/,
loader:['babel-loader'],
exclude: /node_modules/
}, {
test: /\.(png|jpg|gif)$/,
loader:['url-loader?10000&name=images/[hash.12].[ext]'],//use url loader if image is over 10k : use file loader
exclude: /node_modules/
}, {
test: /\.css$/,
loaders: cssLoader,
exclude: /node_modules/
}]
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: PRODUCTION ? '' : '/dist/',
filename: PRODUCTION ? 'bundle.[hash:12].min.js' : 'bundle.js'
}
};
package.json
{
"name": "starter",
"version": "1.0.0",
"description": "starter project using webpack 2",
"main": "index.js",
"scripts": {
"build": "rimraf dist && NODE_ENV=production webpack",
"dev": "NODE_ENV=development webpack-dev-server"
},
"repository": "https://github.com/rafh/starter-project.git",
"author": "Rafael Heard rafael.heard@gmail.com",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"autoprefixer": "^6.7.6",
"babel": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"css-loader": "^0.26.2",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.10.1",
"html-webpack-plugin": "^2.28.0",
"loader": "^2.1.1",
"postcss-loader": "^1.3.3",
"rimraf": "^2.6.1",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}
答案 0 :(得分:2)
您的网络包配置存在一些问题,坦率地说,我不知道哪一个会导致问题,因此我将概述所有问题,并希望其中一个解决问题。< / p>
cssLoader
不正确地定义数组,从我所知道的 - 箭头意外地包含在带有加号的字符串中,当它应该分离数组时:
PRODUCTION
? ExtractTextPlugin.extract({
loader: 'css-loader?importLoaders=1&minimize&localIdentName=' + cssIndentifier
})
: ['style-loader','css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 'postcss-loader'];
对于webpack 2,使用加载器的正确语法是use
而不是loaders
/ loader
,如下所示:
{
test: /\.css$/,
use: cssLoader,
exclude: /node_modules/
}
postcss-loader
还建议在之后使用?importLoaders=1
时使用css-loader
,因此您应该将其添加到css-loader
的定义中:
PRODUCTION
? ExtractTextPlugin.extract({
loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
})
: ['style-loader','css-loader?importLoaders=1&localIdentName=' + cssIndentifier, 'postcss-loader']
最后,options
应该直接传递给加载器。 LoaderOptionsPlugin.options.postcss
不理想(我无法在文档中的任何位置看到支持该语法),并且在定义加载器时应该传递选项。将'postcss-loader'
中的字符串cssLoader
替换为此行为的对象。
PRODUCTION
? ExtractTextPlugin.extract({
loader: 'css-loader?minimize&localIdentName=' + cssIndentifier
})
: [
'style-loader',
'css-loader?importLoaders=1&localIdentName=' + cssIndentifier,
{
loader: 'postcss-loader',
options: {
plugins: function () { return [ autoprefixer ] }
}
}
]
postcss loader自述文件指定
options.plugins
应该是一个返回数组的函数,这是一种奇怪的工作方式。如果return [ autoprefixer ]
不起作用,自述文件会说使用return [ require('autoprefixer') ]
,请尝试使用。
我不确定其中哪一项会导致此问题,但希望通过您的webpack配置解决这些问题将解决您的加载程序问题。
答案 1 :(得分:2)
我有同样的问题,这对我有帮助:
1)添加到你的webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
2)然后用:
创建一个postcss.config.jsmodule.exports = {
plugins: [
require('autoprefixer')
]
}