我使用Webpack bundler创建了一个Vuejs项目。一切正常,因为它将CSS注入<style>
标签。但出于某种原因,一旦我执行npm run build
,其中包含以下命令cross-env NODE_ENV=production webpack --progress --hide-modules
,它就会以某种方式呈现在dist/
文件夹中为生产而生成的CSS文件环境。
我有各自的加载器来编译我的SASS文件到CSS以便在开发环境中进行渲染。
这是我的webpack配置文件(对于冗长的文件道歉):
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var plugins = [
new HtmlWebpackPlugin({
title: "TRIIIO",
inject: false,
template: path.resolve(__dirname, 'index.html'),
favicon: path.resolve(__dirname, 'src/assets/images/favicon.png')
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
}),
new ExtractTextPlugin({
filename: '[name].css',
disable: process.env.NODE_ENV === "development"
}),
new CopyWebpackPlugin([
{ from: 'src/assets', to: 'src/assets' }
]),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
]
function resolve (dir) {
return path.join(__dirname, '../', dir)
}
module.exports = {
entry: {
application: [
'./src/main.js',
'./src/assets/styles/style.scss'
]
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
node: {
fs: "empty",
tls: "empty",
net: "empty"
},
plugins: plugins,
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// vue-loader options go here
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: "css-loader"
},
{
loader: "sass-loader"
}
],
fallback: "style-loader"
})
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
{
test: /\.(otf|eot|ttf|woff)$/,
loader: `file-loader?name=[name].[ext]?[hash]`
},
{
test: /\.(json)$/,
loader: 'json-loader'
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json', '.scss', '.html'],
// modules: [path.resolve(__dirname, './node_modules')],
alias: {
'vue$': 'vue/dist/vue.common.js',
'@': resolve('src')
}
},
devServer: {
disableHostCheck: true,
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
我不确定配置文件出错的地方让我不能在生产中正确呈现CSS文件。