我正在从事开源项目,现在我需要为前端设置webpack。我在下面尝试了webpack config,JS工作正常,但css不是,没有css输出文件。我不知道为什么会这样,请帮助我。
以下是我的webpack配置js文件:
const path = require("path");
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const node_dir = __dirname + '/node_modules';
const sassLoaders = [
'css-loader',
'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, './public/stylesheets/')
]
const config = {
addVendor: function (name, path) {
this.resolve.alias[name] = path;
this.module.noParse.push(new RegExp('^' + name + '$'));
},
entry: {
app: './public/javascripts/app.js',
vendors: ['jquery','underscore']
},
output: {
path: path.join(__dirname, process.env.NODE_ENV === 'production' ? './public/dist' : './public/dev'),
filename: process.env.NODE_ENV === 'production' ? '[name].[hash].js' : '[name].js',
publicPath: 'public/dev'
},
module:{
noParse: [],
loaders:[
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
},
{
test: /\.js$/,
exclude: /node_modules/,
loader:'babel?presets[]=es2015'
}
]
},
resolve: {
alias: {},
extensions: ['', '.js', '.scss'],
},
plugins: [
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("qor.css", {
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.bundle.js'),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new webpack.ProvidePlugin({
_: "underscore",
})
]
};
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('underscore', node_dir + '/underscore/underscore.js');
module.exports = config;
当我运行时webpack -d --watch --progress --colors
,没有CSS文件输出。只是js文件。
这是我的项目文件夹
您是否忘了使用require在js入口点中要求样式表:
// in your modules just require the stylesheet
// This has the side effect that a <style>-tag is added to the DOM.
require("./stylesheet.css");
如果要生成本机CSS输出文件,请参阅webpack文档中的本指南。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句