webpack2 options are useless #128
Comments
|
Could you show your webpack config when you try to put PostCSS plugins there? |
|
here's my webpack.config.js const path = require('path');
const webpack = require('webpack');
const Md5HashPlugin = require('webpack-md5-hash');
const autoprefixer = require('autoprefixer');
function getPostcssPlugins(){
return [
autoprefixer({
cascade : false,
browser : ['Chrome >= 49', 'Firefox >= 49', 'Edge >= 13']
})
]
}
const {DEBUG,readJson,commonPath,webpackPlugins:{StatsWritterPlugin}} = require('../helper');
const babelrc = readJson(path.resolve(__dirname,'./.babelrc'));
const publicPath = '/resource/';
const vendor = ['vue','vue-router'];
module.exports = function (name){
const config = {
plugins:[
]
};
switch(name){
case 'vendor':
config.entry = {vendor};
config.output={
path : path.resolve(__dirname, './web/resource'),
filename : DEBUG?'[name].hash.js':'[name].[chunkhash].js',
library:'[name]_[chunkhash]',
publicPath
};
config.plugins.push(new webpack.DllPlugin({
path:'./.manifest/vendor.manifest.json',
name:'[name]_[chunkhash]',
context:__dirname
}));
config.plugins.push(new StatsWritterPlugin(path.resolve(__dirname,'./.manifest/vendor.stats.json'),{
source:false,
modules:false,
children:false,
chunks:false
}));
break;
default:
config.entry = {app:'./resource/app.entry.js'};
config.output={
path:path.resolve(__dirname,'./web/resource'),
filename:DEBUG?'app.hash.js':'app.[chunkhash].js',
publicPath
};
config.module={
rules : [
{
test : /\.js$/,
include:[path.resolve(__dirname,'./resource'),commonPath],
loader : 'babel-loader',
},
{
test : /\.scss$/,
use : [
'style-loader',
`css-loader${DEBUG ? '' : '?minimize'}`,
{
loader : 'postcss-loader',
options : {
plugins:getPostcssPlugins
}
},
'sass-loader'
]
},
{
test : /\.(png|jpg|svg)$/,
loader : 'file-loader',
options : {
name : 'assets/[hash].[ext]',
publicPath
}
},
{
test : /\.vue$/,
loader : 'vue-loader',
options : {
postcss : getPostcssPlugins(),
loaders : {
js : 'babel-loader',
sass: `style-loader!css-loader${DEBUG?'':'?minimize'}!sass-loader`
}
}
}
]
};
config.resolve={
extensions:['.js','.json','.vue'],
alias:{
common:commonPath
}
};
if(babelrc) config.module.rules[0].options = babelrc;
config.plugins.push(new webpack.DefinePlugin({
DEBUG
}));
config.plugins.push(new webpack.DllReferencePlugin({
context:__dirname,
manifest:require('./.manifest/vendor.manifest.json')
}));
if(DEBUG){
config.watch = true;
config.watchOptions = {
aggregateTimeout : 500,
ignored : /node_modules/
};
config.devtool = 'inline-source-map';
}
config.plugins.push(new StatsWritterPlugin(path.resolve(__dirname,'./.manifest/app.stats.json'),{
source:false,
modules:false,
children:false,
chunks:false
}));
break;
}
if (!DEBUG){
config.plugins.push(new webpack.optimize.UglifyJsPlugin({
compress : { warnings : false },
output : { comments : false },
sourceMap : false
}));
config.plugins.push(
new webpack.DefinePlugin({
'process.env' : {
NODE_ENV : '"production"'
}
})
);
config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
config.plugins.push(new webpack.optimize.DedupePlugin());
}
config.plugins.push(new Md5HashPlugin());
return config;
}; |
|
Strange. Could you comment |
|
@ai When I did this http://pastebin.com/0J9dcXCp, it did not work as I expected. After a while debugging, I found that |
|
@marcelaraujo could you show webpack config without You don’t need |
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const mqpacker = require('css-mqpacker');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'react-hot-loader/patch',
'babel-polyfill',
'whatwg-fetch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index',
],
output: {
path: path.resolve(process.cwd(), 'dist'),
publicPath: '/',
filename: 'app.[hash].js',
},
devtool: 'eval',
module: {
rules: [{
test: /\.js$/,
include: [
path.resolve(process.cwd(), 'src'),
],
use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', { modules: false }], 'stage-0', 'react'],
plugins: ['transform-runtime', 'transform-object-rest-spread', 'react-hot-loader/babel'],
},
}],
}, {
test: /\.css$/,
include: [
path.resolve(process.cwd(), 'src'),
],
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
options: {
modules: true,
importLoaders: true,
localIdentName: '[hash:base64:5]',
},
}],
}, {
test: /\.css$/,
include: [
path.resolve(process.cwd(), 'node_modules'),
],
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader',
options: {
autoprefixer: false,
},
}, {
loader: 'postcss-loader',
options: {
postcss: [
precss(),
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10',
],
}),
mqpacker(),
],
},
}],
}, {
test: /\.(jpe?g|png|gif|svg)$/,
use: [{
loader: 'file-loader',
}, {
loader: 'image-webpack',
options: {
progressive: true,
optimizationLevel: 7,
interlaced: false,
pngquant: {
quality: '65-90',
speed: 4,
},
},
}],
}],
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
// new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({
hash: false,
template: './index.html',
}),
// new webpack.LoaderOptionsPlugin({
// test: /\.css$/,
// debug: true,
// options: {
// postcss: [
// precss(),
// autoprefixer({
// browsers: [
// 'last 3 version',
// 'ie >= 10',
// ],
// }),
// mqpacker(),
// ],
// context: path.join(__dirname, 'src'),
// output: {
// path: path.join(__dirname, 'dist'),
// },
// },
// }),
],
};and the Webpack output |
|
@marcelaraujo what do you have at |
my package.json |
|
Output for line https://github.com/postcss/postcss-loader/blob/master/index.js#L63 |
|
Strange, could you create some small test project? I will look on next week. |
|
Yeap. I'll send to you later ;) |
|
Loading plugins through webpack 2 is not working at the moment. Check this comment for reference. |
|
I'm experiencing the same issue
Here's my config: |
|
Seems like Right now just use PostCSS common config. Anyway it is recommended way |
|
Same issue here, I tried multiple things, but nothing seemed to work. |
|
Until webpack 2 is not released I will promote only common config 8c7cede Have no idea how to fix this problems (webpack has really problems with complexity) |
|
the issue is webpack/webpack#3136 |
|
if you are using webpack 2 in plugin webpack config add this |
|
@Imanullah don’t use |
|
@ai whats wrong with |
|
I am getting this problem and webpack 2 has been released. |
|
@kmiyashiro Please post your |
webpack.config.babel.js// bable.js extension tells babel-register to process this with babel
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const HtmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// npm script
const SEGMENT_KEY = process.env.BEER_SEGMENT_KEY;
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build'),
};
const commonHtmlConfig = {
title: 'Beer Feels',
appMountId: 'root',
mobile: true,
template: 'templates/index.html',
inject: false,
segmentKey: SEGMENT_KEY,
};
const common = {
entry: {
app: PATHS.app,
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [
PATHS.app,
'node_modules',
],
alias: {
beerfeels: PATHS.app,
},
},
output: {
path: PATHS.build,
filename: 'app.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
include: PATHS.app,
},
{
test: /\.jsx?$/,
use: 'babel-loader',
include: PATHS.app,
},
],
},
plugins: [
new webpack.EnvironmentPlugin([
'BEER_FEELS_API_URL',
]),
],
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge.smart(common, {
output: {
publicPath: 'http://localhost:8080/',
},
// https://webpack.github.io/docs/webpack-dev-server.html
devServer: {
contentBase: PATHS.build,
historyApiFallback: true,
hot: true,
inline: true,
stats: 'errors-only',
host: process.env.HOST,
port: process.env.PORT,
},
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins() {
return [
require('autoprefixer')({
browsers: ['last 2 versions'],
remove: false,
}),
];
},
},
},
{
loader: 'sass-loader',
options: {
includePaths: ['node_modules'],
},
},
],
include: PATHS.app,
},
],
},
// devtool: 'eval-source-map',
plugins: [
new HtmlPlugin(Object.assign({
cache: true,
}, commonHtmlConfig)),
new webpack.HotModuleReplacementPlugin(),
],
});
}
if (TARGET === 'build') {
module.exports = merge.smart(common, {
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins() {
return [
require('autoprefixer')({
browsers: ['last 2 versions'],
remove: false,
}),
];
},
},
},
{
loader: 'sass-loader',
options: {
includePaths: ['node_modules'],
},
},
],
}),
include: PATHS.app,
},
],
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
new HtmlPlugin(Object.assign({
hash: true,
}, commonHtmlConfig)),
new ExtractTextPlugin('style/main.css'),
],
});
} |
// In General
- 'css-loader'
+ { loader: 'css-loader', options: { importLoaders: 1 } } // .css
+ { loader: 'css-loader', options: { importLoaders: 2 } } // .scss
// In Build/Production
if (TARGET === 'build') {
module.exports = merge.smart(common, {
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
// you don't want the logic for adding <style></style> in your CSS bundle :D
- 'style-loader',
'css-loader',
{Otherwise I can't see any obvious errors in your |
|
@michael-ciniawsky thanks! It may have been the style-loader that was causing the issue? I removed it and added the |
|
@kmiyashiro Yep, likely to be the cause of your problem 🙃 |
|
@shjyh Hello, you can try this: It's out of use |
|
great, and now i use |
|
I'm getting the same error with the latest version of postcss-loader whilst configuring it in postcss options in The error is resolved by putting an empty instead, which doesn't have this issue. |
|
Please try the |
I use postcss-loader in webpack 2.x config with options just like the sample in document.
I received a warn when I run it :
then I create postcss.config.js file in the root of my project folder. it seems everything ok.
but the warn shows again when i import a set of common UI style out of my project.
is necessary put the postcss.config.js file in the common parent folder of all stylesheet files ?
and I want to import this common UI style into different project with different postcss config, how can I do?
The text was updated successfully, but these errors were encountered: