我已经了解了关于此的每个stackoverflow帖子，但没有一个解决方案适合我。我试图将我的样式从bundle.js分离到单独的css文件。这是我的webpack.config.js文件：
const webpack = require('webpack');
const production = process.env.NODE_ENV === 'production';
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PATHS = {
app: path.join(__dirname, 'src'),
style: path.join(__dirname, 'builds', 'main.css'),
build: path.join(__dirname, 'builds')
};
let plugins = [
new webpack.optimize.CommonsChunkPlugin({
name: 'main', // Move dependencies to our main file
children: true, // Look for common dependencies in all children,
minChunks: 2, // How many times a dependency must come up before being extracted
}),
new ExtractTextPlugin('[name].css')
];
if (production) {
plugins = plugins.concat([
//new ExtractTextPlugin('./builds/app.css'),
// Cleanup the builds/ folder before
// compiling our final assets
new CleanPlugin('builds'),
// This plugin looks for similar chunks and files
// and merges them for better caching by the user
new webpack.optimize.DedupePlugin(),
// This plugins optimizes chunks and modules by
// how much they are used in your app
new webpack.optimize.OccurenceOrderPlugin(),
// This plugin prevents Webpack from creating chunks
// that would be too small to be worth loading separately
new webpack.optimize.MinChunkSizePlugin({
minChunkSize: 51200, // ~50kb
}),
// This plugin minifies all the Javascript code of the final bundle
new webpack.optimize.UglifyJsPlugin({
mangle: true,
compress: {
warnings: false, // Suppress uglification warnings
},
}),
// This plugins defines various variables that we can set to false
// in production to avoid code related to them from being compiled
// in our final bundle
new webpack.DefinePlugin({
__SERVER__: !production,
__DEVELOPMENT__: !production,
__DEVTOOLS__: !production,
'process.env': {
BABEL_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
]);
}
module.exports = {
debug: !production,
devtool: production ? false : 'eval',
entry: './src',
output: {
path: 'builds',
filename: production ? '[name]-[hash].js' : 'bundle.js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'builds/',
},
// need this so code updates are detected across the time space continuum
// (i.e. from local dev IDE to Vagrant)
watchOptions : {
poll: 300
},
plugins: plugins,
module: {
preLoaders: [
{
test: /\.js/,
loader: 'eslint',
}
],
loaders: [
{
loader: 'babel-loader',
// Skip any files outside of your project's `src` directory
include: [
PATHS.app
],
exclude: '/node_modules/',
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
// Options to configure babel with
query: {
presets: ['es2015', 'react'],
}
},
{
test: /\.scss$/,
exclude: '/node_modules/',
loader: ExtractTextPlugin.extract('style-loader','css!sass')
},
// {
// test: /\.scss$/,
// exclude: '/node_modules/',
// loaders: ['style', 'css', 'sass'],
// },
{
test: /\.html/,
loader: 'html',
}
]
},
};
以下是我的文件结构：
/builds
bundle.js
/src
Button.html
Button.js
Button.scss
.
.
.
以下是我的组件的js文件之一：
import $ from 'jquery';
import template from './Button.html';
import Mustache from 'mustache';
require('./Button.scss');
export default class Button {
constructor(link) {
this.link = link;
}
onClick(event) {
console.log('event!');
event.preventDefault();
}
render(node) {
const text = $(node).text();
// Render our button
$(node).html(
Mustache.render(template, {text})
);
// Attach our
$('.button').click(this.onClick.bind(this));
}
}
我也尝试过import './Button.scss'，但这也不起作用。我有这样的文件设置的原因是使我的组件模块化（相对于将所有scss文件，js文件和html分别放入单独的文件夹中）。
使用此设置，这是webpack的输出：
Hash: 6a3f7c601a79a3c623ac
Version: webpack 1.13.2
Time: 9413ms
Asset Size Chunks Chunk Names
bundle.js 338 kB 0 [emitted] main
button-b1a788bd9f86b45a8e59.js 4.39 kB 1 [emitted] button
2-6833a661a664e93b75c4.js 4.04 kB 2 [emitted]
3-c1f2bacfb61ab3b0db4e.js 94.2 kB 3 [emitted]
[0] ./src/index.js 538 bytes {0} [built]
[1] ./src/Components/Button.js 1.81 kB {1} [built] [1 warning]
[2] ./~/jquery/dist/jquery.js 267 kB {0} [built]
[3] ./src/Components/Button.html 72 bytes {1} [built]
[4] ./~/mustache/mustache.js 19.4 kB {0} [built]
[5] ./src/Components/Button.scss 1.05 kB {1} [built]
[6] ./~/css-loader!./~/sass-loader!./src/Components/Button.scss 300 bytes {1} [built]
[7] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
[8] ./~/style-loader/addStyles.js 7.15 kB {0} [built]
[9] ./src/Components/Header.js 1.56 kB {2} [built]
[10] ./src/Components/Header.html 64 bytes {2} [built]
[11] ./src/Components/Header.scss 1.05 kB {2} [built]
[12] ./~/css-loader!./~/sass-loader!./src/Components/Header.scss 192 bytes {2} [built]
[13] ./src/Components/Foundation.js 37 bytes {3} [built]
[14] ./src/Components/app.scss 1.04 kB {3} [built]
[15] ./~/css-loader!./~/sass-loader!./src/Components/app.scss 88.7 kB {3} [built]
我在尝试使用ExtractTextPlugin时从未见过构建的css文件。我几乎可以肯定我错过了一个愚蠢的小东西，但我只是不知道它是什么。