2

所以我下载了一个包含一堆文件较少的主题，但有一个以正确顺序导入其他文件的主文件。它带有一个 gulp 文件，可以监视任何 .less 文件，但只重新编译导入所有其他文件的文件。它看起来像这样：

gulp.task('less', function () {
 return gulp.src(Paths.LESS_TOOLKIT_SOURCES)
   .pipe(sourcemaps.init())
   .pipe(less())
   .pipe(autoprefixer())
   .pipe(sourcemaps.write(Paths.HERE))
   .pipe(gulp.dest('dist'))
})

到目前为止，我的 webpackconfig 如下所示：

// Things I still need to do:

// 1) Add uglifier plugin for minification

var path = require('path');

var webpack = require('webpack');
var cssnext = require('cssnext');
var cssimport = require('postcss-import');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var isProd = process.env.NODE_ENV === 'production' ? true : false;

module.exports = {
devtool: 'eval',
entry: [
  'webpack-dev-server/client?http://localhost:3000',
  'webpack/hot/only-dev-server',
  './app/index'
],
stylePath: path.resolve(__dirname, 'app', 'style'),
postcss: function () {
  return [
    cssimport({
      path: './app/style/index.css',
      onImport: function (files) {
        files.forEach(this.addDependency)
      }.bind(this)
    }),
    cssnext()
  ]
},
output: {
  path: path.join(__dirname, 'dist'),
  filename: 'bundle.js',
  cssFilename: 'style.css',
  publicPath: '/static/'
},
plugins: [
  new ExtractTextPlugin('style.css', {
    allChunks: true
  }),
  new webpack.HotModuleReplacementPlugin()
],
module: {
  loaders: [{
    test: /\.js$/,
    loaders: ['react-hot', 'babel'],
    include: path.join(__dirname, 'app')
  },
  {
  test: /\.css$/,
  loader: isProd ? ExtractTextPlugin.extract('style', 'css?  modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss') : 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
},
{
  test: /\.less$/,
  loader: "style!css!less"
}]
},
resolve: {
  root: path.resolve(__dirname),
  extensions: [
    '',
    '.js',
    '.css'
  ],
  modulesDirectories: [
    'app',
    'node_modules'
  ]
}
};

我正在尝试使用 webpack 完成同样的事情。我已经安装并设置了指南所说的less-loader，但它会尝试编译所有文件。有没有办法像 gulp 文件一样设置它来监视任何文件但只编译特定文件？我在凤凰城工作时在早午餐中工作，但我试图用 webpack for phoenix 切换早午餐。

在早午餐中，我只是告诉它忽略包含较少文件的文件夹，然后将主文件放在该目录之外，因此早午餐只会编译主文件并导入其他文件。

4

0 回答 0