0
Webpackフローでは、ビルドのタイプによって複数の設定がマージされます。私はまだウェブパックの初心者ですが、それにぶつかる - しかし問題に遭遇しました。複数の設定ファイルのWebpackローダー
セットアップでは、私の共通のフローで使用されるsom cssローダーがあります。これはすべてのビルドにあります。今私は生産ビルドのためだけに使用されるいくつかのローダーが必要です。私の現在のセットアップでは、生産用のローダーは一度も使用されません。しかし、私が一般的なセットアップでローダーからコメントを外すと、プロダクションローダーが実行されます。
異なる設定からCSSのルールをマージする方法はありますか？おかげで -
マイwebpack.config.js
const path = require('path');
const webpackMerge = require('webpack-merge');
const commonPartial = require('./webpack/webpack.common');
const clientPartial = require('./webpack/webpack.client');
const serverPartial = require('./webpack/webpack.server');
const prodPartial = require('./webpack/webpack.prod');
const { getAotPlugin } = require('./webpack/webpack.aot');
module.exports = function (options, webpackOptions) {
options = options || {};
webpackOptions = webpackOptions || {};
if (options.aot) {
console.log(`Running build for ${options.client ? 'client' : 'server'} with AoT Compilation`)
}
let serverConfig = webpackMerge({}, commonPartial, serverPartial, {
entry: options.aot ? { 'main-server' : './Client/main.server.aot.ts' } : serverPartial.entry, // Temporary
plugins: [
getAotPlugin('server', !!options.aot)
]
});
let clientConfig = webpackMerge({}, commonPartial, clientPartial, {
plugins: [
getAotPlugin('client', !!options.aot)
]
});
if (options.prod) {
// Change api calls prior to packaging due to the /web root on production
clientConfig = webpackMerge({}, prodPartial, clientConfig);
serverConfig = webpackMerge({}, prodPartial, serverConfig);
}
const configs = [];
if (!options.aot) {
configs.push(clientConfig, serverConfig);
} else if (options.client) {
configs.push(clientConfig);
} else if (options.server) {
configs.push(serverConfig);
}
return configs;
}
マイwebpack.common.js
const { root } = require('./helpers');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
/**
* This is a common webpack config which is the base for all builds
*/
const extractBeneath = new ExtractTextPlugin('../assets/stylesheets/beneath.css');
const extractSkolePlan = new ExtractTextPlugin('../assets/stylesheets/skoleplan.css');
const source = path.resolve(__dirname, 'Client');
const appDirectory = path.resolve(source, 'app');
module.exports = {
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.js']
},
output: {
filename: '[name].js',
publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
},
module: {
rules: [
{ test: /\.ts$/, loader: '@ngtools/webpack' },
{
//***** This is working nicely *****
test: /\.css$/,
exclude: appDirectory,
use: extractSkolePlan.extract({
fallback: 'to-string-loader',
use: 'css-loader?sourcemap'
})
},
{
//***** This is working nicely too *****
test: /\.css$/,
include: appDirectory,
use: 'raw-loader'
},
{ test: /\.html$/, loader: 'html-loader' },
{
test: /\.less$/,
use: extractBeneath.extract({
fallback: 'to-string-loader',
use: ['css-loader', 'less-loader']
})
},
{ test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url-loader?limit=10000' },
{ test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=25000' }
]
}
,
plugins: [
extractSkolePlan,
extractBeneath
]
};
そして、私のwebpack.prod.js
const { root } = require('./helpers');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const StringReplacePlugin = require("string-replace-webpack-plugin");
const source = path.resolve(__dirname, 'Client');
const appDirectory = path.resolve(source, 'app');
/**
* This is a prod config to be merged with the Client config
*/
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /return window.location.origin;/ig,
replacement: function() {
console.log(' Her er javascript replaced');
return 'return window.location.origin + \'/web\'';
}
}
]
})
},
{
//***** This is never loaded *****
test: /\.css$/,
exclude: appDirectory,
use: StringReplacePlugin.replace({
replacements: [
{
pattern: /assets/ig,
replacement: function() {
console.log('Her er css skiftet');
return '/web/assets/martin';
}
}
]
})
}
]
},
plugins: [
// an instance of the plugin must be present
new StringReplacePlugin()
]
};
すべてのヘルプは感謝です:-)