2

そこで、ファイルの数が少ないテーマをダウンロードしましたが、他のファイルを正しい順序でインポートするメインのテーマがあります。任意の .less ファイルを監視する gulp ファイルが付属していましたが、他のすべてをインポートするファイルのみを再コンパイルします。次のようになります。

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でブランチを切り替えようとしています。

ブランチでは、少ないファイルを含むフォルダーを無視するように指示し、メインの少ないファイルをそのディレクトリの外に置いて、ブランチがメインの少ないファイルのみをコンパイルし、他のファイルをインポートするようにしました。

4

0 に答える 0