代码之家  ›  专栏  ›  技术社区  ›  kkdeveloper7

webpack使用extract text webpack插件将css提取到单独的文件中

  •  1
  • kkdeveloper7  · 技术社区  · 8 年前

    我试图提取所有 .css xtract-text-webpack-plugin .

    由于某些原因,我在运行web pack后没有输出任何文件。

    这是我的网页。配置文件

    var path = require('path');
    var webpack = require('webpack');
    
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    const css = new ExtractTextPlugin('styles/[name].css');
    
    module.exports = {
        entry: [
            './App/main.js'
        ],
        output: {
            path: path.join(__dirname, '/wwwroot/js/'),
            filename: '[name].js',
        },
        resolve: {
            extensions: ['.css']
        },
        module: {
            rules: [{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                })
            }]
        },
        plugins: [
            css
        ],
    
    }
    

    这是我在控制台中得到的输出

    Hash: 81acf65502ca13764b09
    Version: webpack 3.2.0
    Time: 71ms
      Asset     Size  Chunks             Chunk Names
    main.js  2.62 kB       0  [emitted]  main
       [0] multi ./App/main.js 28 bytes {0} [built]
       [1] ./App/main.js 27 bytes {0} [built]
    

    .css 知道为什么会这样吗?

    package.json 文件

    "dependencies": {},
      "devDependencies": {
        "css-loader": "^0.28.4",
        "extract-text-webpack-plugin": "^3.0.0",
        "webpack": "^3.2.0"
      }
    

    非常感谢。

    2 回复  |  直到 8 年前
        1
  •  1
  •   Yasser Shaikh    8 年前

    有很多方法可以做到这一点。这是我一直在做的事情。。。。

    module: {
                rules: [
                    {
                        test: /\.css$/, use: ExtractTextPlugin.extract(
                            { use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }
                        )
                    }
            },
            output: { path: path.join(__dirname, clientBundleOutputDir) },
            plugins: [
                new ExtractTextPlugin('site.css')
    

    我所有使用这种配置的CSS都被提取到一个站点中。css文件。

        2
  •  0
  •   kkdeveloper7    8 年前

    我的网页配置正确。

    有两种方法可以做到这一点

    .scss 它将为css文件提供一个入口点。

     entry: {
            index: "./scripts/index.js",
            vendor: "./styles/yourcss.css"
        }