相关疑难解决方法(0)

我有:

1. 我要捆绑的JS文件.
2. 我想编译成CSS的LESS文件(将@imports解析为单个包).

我希望将这些指定为两个单独的输入并具有两个单独的输出(可能通过extract-text-webpack-plugin).Webpack有所有适当的插件/加载器来进行编译,但它似乎不喜欢分离.

我已经看到人们需要直接从JS获取LESS文件的例子,例如require('./app.less');,除了告诉webpack将这些文件包含在bundle中之外别无他法.这允许你只有一个入口点,但这对我来说似乎非常不对 - 为什么我的JS中的LESS与我的JS代码无关时需要LESS？

我尝试使用多个入口点,将条目JS和主LESS文件都放入其中,但是当使用多个入口点时,webpack会生成一个在加载时不执行JS的包 - 它将所有内容捆绑在一起,但不知道什么应该在启动时执行.

我只是使用webpack错了吗？我应该为这些单独的模块运行单独的webpack实例吗？如果我不打算将它们混合到我的JS中,我是否应该将webpack用于非JS资产？

我目前有一些反应组件和sass正在使用webpack成功构建.我还有一个主要的sass文件,使用gulp任务构建到css.

我只想使用其中一种技术,是否可以将sass编译为css,而无需在条目文件中对sass进行相关的需求？

这是尝试使用WebpackExtractTextPlugin的示例

webpack.config.js

entry_object[build_css + "style.css"] = static_scss + "style.scss";
module.exports = {
  entry: entry_object,
  output: {
    path: './',
    filename: '[name]'
  },
{
  test: /\.scss$/,
  include: /.scss$/,
  loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}
  plugins: [
    new ExtractTextPlugin("[name]")
  ]

运行webpack后,style.css资产如下所示:

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {

...

我有这样的目录结构:

和node_modules内:

 >node_modules
  >./bin
   >webpack.config.js
  >bootstrap
   >bootstrap.css
   >bootstrap.js

我需要像这样生成单独的CSS和JS包:

custom-styles.css,custom-js.js,style-libs.css,js-libs.js

where style-libs和js-libsshould应该包含所有库的syles和js文件,如bootstrap和jQuery.这是我到目前为止所做的:

webpack.config.js:

const path = require('path');
const basedir = path.join(__dirname, '../../client');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const stylesPath = path.join(__dirname, '../bootstrap/dist/css');

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

module.exports = {
  watch: true,

  // Script to bundle using webpack
  entry: path.join(basedir, 'src', 'Client.js'),
  // Output directory and bundled file
  output: {
    path: path.join(basedir, 'dist'),
    filename: 'app.js'
  },
  // Configure module loaders (for JS ES6, JSX, etc.)
  module: {
    // Babel …

对于prod构建,我希望我的webpack配置有两个入口点,一个用于JS,一个用于SCSS,我希望将它们输出到两个单独的文件(一个JS,一个CSS).

但是,extract-text-webpack-plugin正在创建两个JS文件和一个CSS文件; 即SCSS的入口点产生了所需的CSS文件和我不想要的JS文件.这个未使用的JS文件只包含webpack样板和文件// removed by extract-text-webpack-plugin.所以它正在完成它的工作,但仍然创建这个不必要的文件.我的webpack配置是(显示相关部分):

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

module.exports = {
    entry: {
        app: './client/src/app.js',
        style: './client/src/app.scss'
    },
    output: {
        path: __dirname + '/server/assets/',
        publicPath: '/',
        filename: 'bundle.[chunkhash].js',
    },
    module: {
        loaders: [{
        test: /\.js/,
        exclude: /node_modules/,
        include: /src/,
        loader: 'babel-loader'
        },{
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style', 'css', 'sass'),
        },{
        test: /.*\.(woff|woff2|eot|ttf)$/i,
        loader: "url-loader?limit=10000&mimetype=application/font-woff"
        },{
        test: /.*\.(png|svg|jpg)$/i,
        loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
        ]
        }]
    },
    plugins: [
        new ExtractTextPlugin('bundle.[chunkhash].css', { …