【问题标题】:webpack build less files output one css minify filewebpack build less files 输出一个 css minify 文件
【发布时间】:2015-12-04 00:35:09
【问题描述】:

webpack 是我需要将几个文件传递到一个缩小的 CSS 文件中的工具吗?
如果是这样,我不确定我在下面的代码中做错了什么?
有没有办法输出到不同的文件路径,现在我的js文件输出到'./assets/javascripts/bundle/',我想让我的css文件输出到'./assets/stylesheets/bundle/',我该怎么做?

更新
我做了一个测试,我可以将我的less文件构建为一个css文件,但仍然无法找到如何为输出文件夹设置多个路径,现在我必须注释掉js入口部分并更改输出路径...

webpack 配置

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

module.exports = {
  entry: {
    'MediaIndex':['./assets/javascripts/Media/Index/Base.js'],
    // stylesheets
    'MediaIndexStyleSheet':['./assets/stylesheets/Media/Index/Base.js']
  },
  output: {
    path: './assets/javascripts/bundle/',
    filename: '[name].js'
  },
  resolve: {
    alias: {
      jquery: path.join(__dirname, "assets/javascripts/lib/jquery-1.11.1.min.js"),
      "jquery-ui": path.join(__dirname, "assets/javascripts/lib/jquery-ui.min.js"),
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    }),
    new ExtractTextPlugin("[name].css")
  ],
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
      }
    ]
  },
};

assets/stylesheets/Media/Index/Base.js

require('../../../Global/Config.less');
require('../../../Global/Fp.less');
require('../../../Global/Urb.less');
require('../../../Global/Ad1.less');
require('./Nav0.less');
require('./Index.less');
require('./Content.less');

无配置

@color: 'red';

无索引

body {
  background-color: @{color};
}

【问题讨论】:

    标签: javascript css webpack


    【解决方案1】:

    你快到了。就像您已经做过的那样,您可以使用ExtractTextPlugin 将所有样式放入一个 css 文件中。要将您的 js 和 css 放入不同的目录,您只需在 ExtractTextPluginoutput.filename 中定义一个相对于您的 output.path 的路径。例如:

    output: {
        path: './assets',
        filename: './javascripts/bundle/[name].js'
    },
    plugins: [
        new ExtractTextPlugin("./stylesheets/bundle/[name].css")
    ]
    

    【讨论】:

    • 感谢您的回复,这项工作!我想知道是否可以将 css 文件名设置为与 javascript 文件名相同,现在我必须在入口处的文件名之后添加 StyleSheet
    猜你喜欢
    • 1970-01-01
    • 2018-08-09
    • 1970-01-01
    • 2016-01-31
    • 1970-01-01
    • 2022-12-27
    • 2018-05-17
    • 2017-07-10
    • 2017-03-26
    相关资源
    最近更新 更多