javascript - 使用 webpack 和 stylus 创建静态 css

Question

Webpack 的新手。我正在考虑将我的应用程序的 JS 部分迁移到它。但是，我不喜欢它处理 CSS 的方式。想保持简单并自己链接它们。不幸的是，文档不是很有帮助，搜索结果也是如此。

那么，我究竟需要什么？

1. 从大量 .styl 文件到静态 .css 的手写笔编译。
2. 将有三个静态样式表文件(入口点？)，但与应用程序 JS 部分的入口点完全不同。
3. 还有一些“监视”功能，当其中一个源 .styl 文件发生更改时会编译 css。

有没有人可以给我指明正确的方向，也许可以写一个配置？这甚至可以通过 Webpack 实现，还是我应该继续使用 Grunt？

感谢任何有用的答案。

Answer 1

想了解更多Webpack的细节可以引用这本在线书籍SurviveJS - Webpack ，它将带您了解与 Webpack 相关的大部分概念。要完成您需要的工作，您可以从在项目的根目录中创建 webpack.config.js 开始，它可以是这样的:

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = { 
    entry: './entry.js', // you application entry point
    output: {
        filename: 'bundle.js', // resulting bundle file
        path: './public' // the output folder path
    },
    module: {
        loaders: [
            {
                test: /\.styl$/,
                loader: ExtractTextPlugin.extract("style", "!css!stylus") // plugin used to extract css file from your compiled `styl` files
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('style.css') // output css bundle
    ]
};

然后在你的 entry.js 文件中 require 你的手写笔文件 require('./style.styl');

不要忘记安装所需的加载器和插件

npm install --save-dev css-loader sass-loader style-loader extract-text-webpack-plugin