Webpackを使用してファイルをインポートせずにすべてのファイルを連結して小さくします。

Question

私はWebpack経由で1つのファイルに連結し、これをmy/distフォルダに格納する必要があります。次のように私の現在のWebPACKの設定ファイルは次のとおりです。

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 
const bundleOutputDir = './wwwroot/dist'; 


module.exports = (env) => { 
    const isDevBuild = !(env && env.prod); 
    return [{ 
     stats: { modules: false }, 
     entry: { 'main': './ClientApp/boot.ts' }, 
     resolve: { extensions: ['.js', '.ts'] }, 
     output: { 
      path: path.join(__dirname, bundleOutputDir), 
      filename: '[name].js', 
      publicPath: '/dist/' 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }, 
       { test: /\.html$/, use: 'raw-loader' }, 
       { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader' }) }, 
       { test: /\.less/, use: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader') }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } 
      ] 
     }, 
     plugins: [ 
      new CheckerPlugin(), 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }) 
     ].concat(isDevBuild ? [ 
      // Plugins that apply in development builds only 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
       // Plugins that apply in production builds only 
       new webpack.optimize.UglifyJsPlugin(), 
       new ExtractTextPlugin('site.less'), 
       new ExtractTextPlugin('site.css') 
      ]) 
    }]; 
}; 

私がしようとboot.tsエントリファイルに各単一.lessファイルをインポートする場合、私はあまりエラーを取得する私が宣言した以下の変数があることを知らせます認識されていないので、私はこれらのファイルを事前に連結する必要があるという結論に至りました。私はガルプのバックグラウンドから来ているので、これで私を立ち上げて走らせる助けがあれば大いに感謝します。

コンバットを必要とせずに、コンパイルされたコードをすべてコンパイルして正しく動作させるための代替方法がある場合は、私は提案を受け付けています。

Answer 1

Webpackは、JavaScript（ES6、CommonJS、AMD ..）、CSS（@import、url）、HTML（src属性を使用）のモジュール構文を使用して、アプリケーションの依存関係グラフを構築し、それはいくつかのバンドルで。

* .lessファイルをインポートすると、エラーが発生するのはCSS modulesです。つまり、他のファイルで定義された変数を使用した場所では、そのファイルは@import -edではありませんでした。

Webpackではすべてをモジュール化することをお勧めします。したがって、不足しているCSSモジュールを追加することをお勧めします。私はGruntからWebpackにプロジェクトを移行していたときと同じ問題がありました。他の一時的な解決方法は、index.lessファイルを作成して、すべてのファイルを少しずつインポートします（注意：順序は重要です）。その後、そのファイルをアプリケーションのエントリファイル（たとえばboot.ts）にインポートします。