我正在尝试让Webpack编译我的手写笔文件,它会将它们全部导入,但它似乎没有将任何内容编译成CSS。
这是我的Webpack配置文件:
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const jeet = require('jeet')
const rupture = require('rupture')
const autoprefixer = require('autoprefixer-stylus')
module.exports = {
entry: {
app: './src/app.js',
vendor: [
'lodash'
]
},
devtool: 'inline-source-map',
output: {
// name will match each entry point above and 'chunkchash' will ensure each new build doesn't cache
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// Process css styles
{
test: /\.styl$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader', 'stylus-loader'
]
})
}
]
},
plugins: [
// Delete old build so we have a fresh start each time
new CleanWebpackPlugin(['dist']),
// Process styles
new webpack.LoaderOptionsPlugin({
options: {
stylus: {
use: [
jeet(),
rupture(),
autoprefixer({ browsers: ['> 3%'] })
]
},
context: '/'
}
}),
// Don't inject the styles as a style tag, extract them into core.css
new ExtractTextPlugin('core.css'),
// Generate all our site icons
// Generate our HTML files for us
new HtmlWebpackPlugin({
template: './src/app.html',
filename: 'index.html',
inject: 'body'
}),
// Prevent unchanging modules from updating their hash
new webpack.HashedModuleIdsPlugin(),
// Put common vendor chunks into their own bundle
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
// Put common internal chunks into their own bundle
new webpack.optimize.CommonsChunkPlugin({
name: 'common'
})
]
}
为了简洁起见,我删除了一些非样式相关的加载器,webpack.dev.js和webpack.prod.js中还有其他非样式相关的东西。
正如其他人对其他帖子发表评论一样,手写笔加载器文档非常糟糕,我已经查看了很多资源,现在我无法分辨哪些部分是Webpack 1,哪些部分是Webpack 2或3。
我正在使用Webpack v3.6.0,但如果我的问题可以通过切换到2来解决,我很乐意这样做。