角度のあるサードパーティのコンポーネントと webpack を使用して web アプリを開発しています。
実稼働モードですべてをバンドルすると、一部のコンポーネントが開発モードでのスタイルを正しく適用していないように見えます。例えば:
ngx-chipsコンポーネント。問題は github で開かれました
開発: 生産:
ng2-smart-tableコンポーネントの問題が github で公開されました
開発: 生産:
それが独自のコンポーネントの故障であるかどうかはまったくわかりません。
これが私が使用しているwebpack.config.common.jsです
var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
filename: "bundle.css",
disable: process.env.NODE_ENV === "development"
});
module.exports = {
entry: {
'app': './assets/app/main.ts'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
rules: [
{
test: /\.html$/,
use: [{ loader: 'html-loader' }]
},
{
test: /\.css$/,
use: [{ loader: 'raw-loader' }]
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
}]
,
noParse: [
/aws-sdk/
],
loaders: [
{
test: /.json$/,
loaders: ['json']
},
],
exprContextCritical: false
}
};
そして、これが私がwebpackにバンドルするために使用しているスクリプトです:
"scripts": {
"start": "node ./bin/www",
"build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
"build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'"
大変お世話になりました!