I'm trying to use extract-text-webpack-plugin to generate bundled css file and make it generated in order.
Now, CSS file was generated, but "ignoreOrder" seems not working, the content's order doesn't obey source code's order.
//webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ExtractSCSS = new ExtractTextPlugin({
filename: function(getPath) {
return getPath('css/[name].css');
},
allChunks: false
});
module.exports = {
entry: {
'index': './index.js',
// ......
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, ((env = 'develop') => {
let assignRoot = {
'develop': './develop/bundle/'
// ......
};
return assignRoot[env];
})(process.env.NODE_ENV))
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: 'imports-loader?this=>window,jQuery=>this.jQuery'
}, {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$|\.scss$/,
use: ExtractSCSS.extract({
use: [
{
loader: 'css-loader',
options: {
minimize: true
}
},
{ loader: 'sass-loader' },
{
loader: 'preprocess-loader',
options: {
THEME: 'uplantravel'
}
}
],
})
}]
},
plugins: ExtractSCSS
};
And my js imports some scss and js.
//index.js
import './@magaele/a.scss';
import './@magaele/b.scss';
import './@magaele/c/css.scss';
//......
import './@magaele/a/module.js';
import './@magaele/b/module.js';
import './@magaele/c/module.js';
//......
- webpack version: 3.5.5
- extract-text-webpack-plugin version: 3.10.10