我可以使用webpack分别生成CSS和JS吗？

Question 1

我有：

我要捆绑的JS文件。
我想编译为CSS的LESS文件（将@imports解析为一个包）。

我希望将它们指定为两个单独的输入，并具有两个单独的输出（可能通过extract-text-webpack-plugin）。Webpack具有所有合适的插件/加载器来进行编译，但似乎不喜欢这种分离。

我已经看到了一些人的示例，这些人直接从JS需要他们的LESS文件，例如require('./app.less');，其原因仅是告诉Webpack将这些文件包含到捆绑包中。这只允许您只有一个入口点，但对我来说似乎真的很不对劲-为什么当与我的JS代码无关的情况下，为什么我的JS中需要LESS？

我尝试使用多个入口点，将入口JS和主LESS文件都交到其中，但是当使用多个入口点时，webpack会生成一个在加载时不执行JS的捆绑软件-捆绑了所有东西，但不知道在启动时应该执行什么。

我只是使用webpack错了吗？我应该为这些单独的模块运行单独的webpack实例吗？如果我不打算将Webpack混入我的JS中，是否应该甚至将webpack用于非JS资产？

Question 2

如果我不打算将Webpack混入我的JS中，是否应该甚至将webpack用于非JS资产？

也许不会。Webpack绝对是以js为中心的，并隐含地假设您正在构建的是js应用程序。它的实现require()允许您将所有内容都视为一个模块（包括Sass / LESS局部变量，JSON，几乎所有内容），并自动为您进行依赖项管理（require捆绑的所有内容，别无其他）。

当与我的JS代码无关时，为什么在我的JS中需要LESS？

人们之所以这样做，是因为他们正在使用js定义其应用程序的一部分（例如React组件，Backbone View）。该应用程序的一部分随附了CSS。依赖于一些单独构建且未从js模块直接引用的外部CSS资源，该资源易碎，更难使用，并且可能导致样式过时等。Webpack鼓励您保持所有模块模块化，因此您拥有CSS （Sass，随便什么）该js组件附带的部分，然后js组件使用require()它来使依赖关系清楚（对您和对构建工具而言，它永远不会构建不需要的样式）。

我不知道您是否可以使用webpack单独捆绑CSS（当未从任何js引用CSS文件时）。我确定您可以使用插件等将其连接起来，但是不确定是否有可能立即使用。如果确实从js中引用CSS文件，则可以轻松地将CSS捆绑到带有Extract Text插件的单独文件中，如您所说。

Question 3

可以在不使用require('main/less)任何JS的情况下生成单独的CSS捆绑包，但是正如Brendan在他的答案的第一部分中指出的那样，Webpack并不是为全球CSS捆绑包设计为与模块化JS搭配使用的，但是有两种选择。

首先是为main.less添加一个额外的入口点，然后使用Extract Text插件创建CSS捆绑包：

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

module.exports = {
    entry: {
        home: [
            'js/common',
            'js/homepage'
        ],
        style: [
            'styles/main.less'
        ]
    },
    output: {
        path: 'dist',
        filename: "[name].min.js"
    },
    resolve: {
        extensions: ["", ".js"]
    },
    module: {
        loaders: [{
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style", "css", "less")
        }]
    },
    plugins: [
        new ExtractTextPlugin("[name].min.css", {
            allChunks: true
        })
    ]
};

此方法的问题在于，在此示例中，您还会生成一个不需要的JS文件以及捆绑包：style.js这只是一个空的Webpack模块。

另一个选项是将主less文件添加到现有的Webpack入口点：

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

module.exports = {
    entry: {
        home: [
            'js/common',
            'js/homepage',
            'styles/main.less'
        ],
    },
    output: {
        path: 'dist',
        filename: "[name].min.js"
    },
    resolve: {
        extensions: ["", ".js"]
    },
    module: {
        loaders: [{
            test: /\.less$/,
            loader: ExtractTextPlugin.extract("style", "css", "less")
        }]
    },
    plugins: [
        new ExtractTextPlugin("[name].min.css", {
            allChunks: true
        })
    ]
};

如果您只有1个入口点，那么这是理想的选择，但是如果您有更多入口点，那么Webpack配置将显得有些奇怪，因为您必须任意选择向其添加主文件的入口点。

Question 4

为了进一步阐明bdmason以前的答案-似乎理想的配置是为每个页面创建一个JS和CSS包，如下所示：

 entry: {
        Home: ["./path/to/home.js", "./path/to/home.less"],
        About: ["./path/to/about.js", "./path/to/about.less"]
    }

然后使用[name]开关：

output: {
        path: "path/to/generated/bundles",
        filename: "[name].js"
    },
plugins: new ExtractTextPlugin("[name].css")

完整配置-某些附加问题未解决（我们实际上使用的是SASS而不是LESS）：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
require('babel-polyfill');

module.exports = [{
    devtool: debug ? "inline-sourcemap" : null,
    entry: {
        Home: ['babel-polyfill', "./home.js","path/to/HomeRootStyle.scss"],
        SearchResults: ['babel-polyfill', "./searchResults.js","path/to/SearchResultsRootStyle.scss"]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader","css-raw-loader!sass-loader")
            }
        ]
    },
    output: {
        path: "./res/generated",
        filename: "[name].js"
    },
    plugins: debug ? [new ExtractTextPlugin("[name].css")] : [
        new ExtractTextPlugin("[name].css"),
        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings: true
            }
        })
    ]
}
];

Question 5

带有mini-css-extract插件的webpack 4解决方案

Webpack团队建议对提取文本插件使用mini-css-extract

此解决方案允许您创建一个仅包含CSS条目的单独块：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
  entry: {
    foo: path.resolve(__dirname, 'src/foo'),
    bar: path.resolve(__dirname, 'src/bar'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          name: 'foo',
          test: (m, c, entry = 'foo') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
        barStyles: {
          name: 'bar',
          test: (m, c, entry = 'bar') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

这是一个使用来自我的个人项目中的多个条目的更人为的示例：

const ManifestPlugin = require('webpack-manifest-plugin')
const webpack = require('webpack')
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VENDOR = path.join(__dirname, 'node_modules')
const LOCAL_JS = path.join(__dirname, 'app/assets/js')
const LOCAL_SCSS = path.join(__dirname, 'app/assets/scss')
const BUILD_DIR = path.join(__dirname, 'public/dist')
const EXTERNAL = path.join(__dirname, 'public/external')

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
  entry: {
    vendor: [
      `${VENDOR}/jquery/dist/jquery.js`,
      `${VENDOR}/codemirror/lib/codemirror.js`,
      `${VENDOR}/codemirror/mode/javascript/javascript.js`,
      `${VENDOR}/codemirror/mode/yaml/yaml.js`,
      `${VENDOR}/zeroclipboard/dist/ZeroClipboard.js`,
    ],
    app: [
      `${LOCAL_JS}/utils.js`,
      `${LOCAL_JS}/editor.js`,
      `${LOCAL_JS}/clipboard.js`,
      `${LOCAL_JS}/fixtures.js`,
      `${LOCAL_JS}/ui.js`,
      `${LOCAL_JS}/data.js`,
      `${LOCAL_JS}/application.js`,
      `${LOCAL_JS}/google.js`
    ],
    'appStyles': [
      `${EXTERNAL}/montserrat.css`,
      `${EXTERNAL}/icons.css`,
      `${VENDOR}/purecss/pure-min.css`,
      `${VENDOR}/purecss/grids-core-min.css`,
      `${VENDOR}/purecss/grids-responsive-min.css`,
      `${VENDOR}/codemirror/lib/codemirror.css`,
      `${VENDOR}/codemirror/theme/monokai.css`,
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        appStyles: {
          name: 'appStyles',
          test: (m, c, entry = 'appStyles') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  module:  {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [ 'script-loader'],
      },
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  mode: 'development',
  resolve: {
    extensions: ['.js', '.css', '.scss']
  },
  output: {
    path: BUILD_DIR,
    filename: "[name].[chunkhash].js",
  },
  plugins: [
    new ManifestPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
  ]
};

我意识到这种方法不是很模块化，但是它应该为您提供基础，并且是在您不希望将javascript和CSS相互混合的项目中采用webpack的绝佳策略。

这种方法的缺点是css-loader仍会生成一个附加的javascript文件（无论您是否选择使用它），据说这将在webpack 5中修复。

如果我不打算将Webpack混入我的JS中，是否应该甚至将webpack用于非JS资产？

我没有发现任何问题，但最终取决于您对多个构建系统的管理能力。对我来说，这感觉有些过头了，所以我更喜欢保留在webpack生态系统中。

有关上述策略的更多信息，请参见https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry

Question 6

是的，这是可能的，但是就像其他人所说的那样，您将需要其他程序包（请参见package.json下的devDependencies）。这是我用来编译Bootstrap SCSS-> CSS和Bootstrap JS-> JS的示例代码。

webpack.config.js：

module.exports = {
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
    entry: ['./src/app.js', './src/scss/app.scss'],
    output: {
    path: path.resolve(__dirname, 'lib/modules/theme/public'),
    filename: 'js/bootstrap.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'css/bootstrap.css',
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader?-url'
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
};

其他postcss.config.js文件：

module.exports = {
    plugins: {
        'autoprefixer': {}
    }
}

package.json：

{
  "main": "app.js",
  "scripts": {
    "build": "webpack",
    "start": "node app.js"
  },
  "author": "P'unk Avenue",
  "license": "MIT",
  "dependencies": {
    "bootstrap": "^4.1.3",
  },
  "devDependencies": {
    "autoprefixer": "^9.3.1",
    "css-loader": "^1.0.1",
    "exports-loader": "^0.7.0",
    "extract-loader": "^3.1.0",
    "file-loader": "^2.0.0",
    "node-sass": "^4.10.0",
    "popper.js": "^1.14.6",
    "postcss-cli": "^6.0.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2"
  }
}

请参阅此处的教程：https : //florianbrinkmann.com/en/4240/sass-webpack

Question 7

像其他提到的一样，您可以使用插件。

ExtractTextPlugin 不推荐使用。

您可以MiniCssExtractPlugin在Webpack配置中使用当前推荐的方法：

module.exports = {
     entry: {
        home: ['index.js', 'index.less']
     },
     plugins: [
            new MiniCssExtractPlugin({
                filename: '[name].css',
            }),
     ]
}

Question 8

您还可以在入口JS文件中放置Less要求语句：

在body.js中

// CSS
require('css/_variable.scss')
require('css/_npm.scss')
require('css/_library.scss')
require('css/_lib.scss')

然后在webpack中

  entry: {
    body: [
      Path.join(__dirname, '/source/assets/javascripts/_body.js')
    ]
  },

const extractSass = new ExtractTextPlugin({
  filename: 'assets/stylesheets/all.bundle.css',
  disable: process.env.NODE_ENV === 'development',
  allChunks: true
})