观看所有Less Files但只编译一个主文件

时间:2015-12-08 14:44:53

标签: javascript webpack phoenix-framework webpack-dev-server webpack-style-loader

所以我下载了一个主题,其中有一堆较少的文件,但有一个主要按正确的顺序导入其他文件。它带有一个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换掉早午餐,为凤凰。

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

0 个答案:

没有答案