如果我使用的是dev模式,那么样式加载器可以正常工作。但当我构建项目并且有dist文件夹时,我看不到
style
标记入
head
标签有趣的是,只有在
bundle.js
文件显示在
dist
.
我的配置:
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const extractSASS = new ExtractTextPlugin({
filename: './css/[name].css',
allChunks: true
});
var entry = [
'babel-polyfill',
'./src/index.js'
]
var output = {
path: path.join(__dirname, 'dist'),
filename: 'js/bundle.js',
publicPath:'/static/'
}
var rules = [
{
use: 'babel-loader',
include: __dirname,
exclude:[
path.resolve(__dirname, "node_modules"),
],
test: /\.js$/
},
{
test: /\.(scss|css)$/,
use: process.env.NODE_ENV == 'production'
? extractSASS.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader']
})
: [ 'style-loader', 'css-loader', 'sass-loader']
}
]
if(process.env.NODE_ENV != 'production') entry.push('webpack-hot-middleware/client')
const dev = {
devtool: 'cheap-module-eval-source-map',
entry: entry,
output: output,
plugins: [
extractSASS,
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
rules: rules
}
}
const prod = {
entry: entry,
output: output,
plugins: [
extractSASS,
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new CopyWebpackPlugin([{from:'src/img', to:'img'}]),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
],
module: {
rules: rules
}
}
module.exports = process.env.NODE_ENV == 'production' ? prod : dev;
有人知道什么会导致问题吗?谢谢