Question

我们正在开发一个带有自定义cms仪表板的web应用程序。

我们的基本文件夹结构如下所示：

src
  -client
    -app
      -less
       ...
    -cms
      -less
       ...
   -server
-webpack-config
    -development
       -client.js
       -server.js
    -production

我们想要实现的目标听起来很简单：但我们正努力让它发挥作用。

app / less＆amp;＆amp;中的文件较少应将每个cms / less捆绑到一个单独的css文件中。

这样我们就可以根据反应中加载的主要组件（app / cms仪表板）加载正确的css文件。我们的cms的样式与我们的应用完全不同。

我们为客户提供的当前webpack配置：

var path  = require('path');
var webpack  = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HTMLCompressionPlugin = require('html-compression-webpack-        plugin');

module.exports = {
    cache: true,
    entry: path.resolve(__dirname, '../../src/client/index.js'),
    devtool: 'eval',
    output: {
        path: path.resolve(__dirname, '../../build/public'),
        pathinfo: true,
        filename: 'client.js',
        publicPath: "/"
    }, 
    module: {
        rules: [
        {
            test: /\.js$/, 
            exclude: path.resolve(__dirname, '../../node_modules'),
            use: [{
                loader: 'babel-loader?cacheDirectory=true',
                options: {
                    "babelrc": false,
                    "presets": [
                    ["es2015",{"modules": false}],
                    "react",
                    "stage-0"
                    ],
                    "plugins": [
                    "transform-react-constant-elements",
                    "transform-react-inline-elements",
                    "transform-react-remove-prop-types"
                    ],
                    "compact": false
                }
            }]
        },
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract({
                notExtractLoader: "style-loader",
                loader: "css-loader?sourceMap?minimize!less-loader?   sourceMap",
                publicPath: "/"
            })
        },
        {
            test: /\.(gif|png|jpe?g)$/i,
            use: 'url-loader?limit=50000'
        }
        ]
    },
    plugins: [
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false,
            screw_ie8: false,
            conditionals: false,
            unused: false,
            comparisons: false,
            sequences: false,
            dead_code: false,
            evaluate: false,
            if_return: false,
            join_vars: false
        },
        output: {
            comments: true
        },
        sourceMap: true
    }),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': '"development"'
        }
    }),new HtmlWebpackPlugin({       
        template: path.resolve(__dirname,       '../../src/client/app/public/index.html'),
        inject: 'body',
        filename: 'index.html',
        hash: false,
        cache: true,
        minify: {},
        alwaysWriteToDisk: true
    }),
    new ExtractTextPlugin("[contenthash].css"),
    new HTMLCompressionPlugin({
        deleteOriginals: false,
        assetsRelativeOutputDirectory: '../../build/public',
        minRatio: 1
    })
    ]
}

非常欢迎任何提示和帮助：提前感谢！

Answer 1

要为css文件生成多个包，您可以创建一个js文件，requires您的css文件，然后将其添加到entry config的wepack属性中。之后，您可以使用 ExtractTextWebpackPlugin 生成单个css文件。有关代码，请参阅此SO Answer。

基于文件夹位置的2个不同的css包（从less \ w webpack编译）

1 个答案: