我目前正在尝试将 CSS 样式恢复为React Boilerplate,并且能够让 css 样式在开发环境中成功加载。当我尝试捆绑项目进行部署时,webpack 和 ExtractTextPlugin 没有创建 css 文件。
版本:
"webpack": "2.1.0-beta.25",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
有人可以看看我下面的 webpack 文件,看看没有创建 css 文件的可能原因是什么?
相关的 webpack.prod.babel.js:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OfflinePlugin = require('offline-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = require('./webpack.base.babel')({
entry: [
path.join(process.cwd(), 'app/app.js'),
],
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].chunk.js',
},
cssLoaders: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader?modules&-autoprefixer&importLoaders=1!postcss-loader"
}),
plugins: [
// Minify and optimize the index.html
new HtmlWebpackPlugin({
template: 'app/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
inject: true,
}),
new ExtractTextPlugin("styles.css"),
}),
],
});
相关的 webpack.base.babel.js:
const path = require('path');
const webpack = require('webpack');
const cssnext = require('postcss-cssnext');
const postcssFocus = require('postcss-focus');
const postcssReporter = require('postcss-reporter');
module.exports = (options) => ({
entry: options.entry,
output: Object.assign({ // Compile into js/build.js
path: path.resolve(process.cwd(), 'build'),
publicPath: '/',
}, options.output), // Merge with env dependent settings
module: {
loaders: [{
// Transform our own .css files with PostCSS and CSS-modules
test: /\.css$/,
exclude: [
/node_modules/,
],
loader: options.cssLoaders,
},{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
}, {
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader',
}],
},
plugins: options.plugins.concat([
new webpack.ProvidePlugin({
// make fetch available
fetch: 'exports?self.fetch!whatwg-fetch',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new webpack.NamedModulesPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
context: path.resolve(process.cwd()),
postcss: [
postcssFocus(), // Add a :focus to every :hover
cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
browsers: ['last 2 versions', 'IE > 10'], // ...based on this browser list
}),
postcssReporter({ // Posts messages from plugins to the terminal
clearMessages: true,
}),
],
},
}),
]),
resolve: {
modules: ['app', 'node_modules'],
extensions: [
'.js',
'.jsx',
'.react.js',
],
mainFields: [
'browser',
'jsnext:main',
'main',
],
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
});