【发布时间】：2020-01-11 07:20:13
【问题描述】：
我有一个 asp.net core 2.0 应用程序，我也在使用 react.js。我有一些 jsx 文件。
我想缩小那些 jsx 文件然后使用。对于 js & css 缩小，
我在bundleconfig.json 中定义了规则，但是 jsx 的接线规则会引发错误。
谁能帮助我如何在 asp.net 核心应用程序中缩小 jsx。
下面是 webpack.config 文件
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
process.traceDeprecation = true;
module.exports = {
entry: {
home: "./wwwroot/js/v2/userdefined/home.page.js"
},
output: {
path: path.resolve(__dirname, "wwwroot/dist"),
filename: "[name].js",
publicPath: "/dist/"
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null
}
}),
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true,
},
},
})
]
},
plugins: [
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /jsx$/),
new webpack.LoaderOptionsPlugin({
options: {}
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: ['popper.js', 'default']
}),
new CompressionPlugin({
test: /\.(js|css)/
}),
new UglifyJsPlugin(),
new WebpackShellPlugin({
onBuildStart: ['echo "Starting postcss command"'],
onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
})
],
resolve: {
modules: [
path.resolve('./node_modules')
]
},
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
]
}
};
下面是 Gruntfile.js
/// <binding AfterBuild='cleanup' />
module.exports = function(grunt) {
require("jit-grunt")(grunt);
grunt.initConfig({
clean: ["./Modules/*"],
copy: {
main: {
expand: true,
src: [
"../Modules/**/bin/Debug/**/**/*.*",
"../Modules/**/wwwroot/**",
],
dest: "./Modules/"
},
css: {
expand: true,
cwd: "../Modules/AwesomeCMSCore.Modules.Frontend/wwwroot/dist",
src: ["cmscore.css"],
dest: "./wwwroot/dist/"
},
js: {
expand: true,
cwd: "../Modules/AwesomeCMSCore.Modules.Frontend/wwwroot/dist",
src: ["*.js"],
dest: "./wwwroot/dist/"
},
static: {
expand: true,
cwd: "../Modules/AwesomeCMSCore.Modules.Frontend/wwwroot/dist",
src: ["**"],
dest: "./wwwroot/dist/"
}
},
watch: {
css: {
files: ["../Modules/**/wwwroot/dist/*.css"],
tasks: ["copy:css"],
options: {
reload: true,
spawn: false
}
},
js: {
files: ["../Modules/**/wwwroot/dist/*.js"],
tasks: ["copy:js"],
options: {
reload: true,
spawn: false
}
}
}
});
grunt.registerTask("default", ["watch"]);
grunt.registerTask("cleanup", [
"clean",
"copy:main",
"copy:static"
]);
};
下面是我的 package.json
{
"name": "ProjV2",
"version": "1.0.0",
"main": "index.js",
"author": "JitendraPancholi",
"license": "",
"scripts": {
"prod": "webpack -p --mode=production --config webpack.prod.js",
"start": "webpack --mode=development --config webpack.dev.js",
"lint:js": "eslint \"wwwroot/js/react/src/**/*.{js,jsx}\" --color",
"lint:style": "stylelint \"wwwroot/css/**/*.scss\" --syntax scss"
},
"devDependencies": {
"babel-cli": "6.26.0",
"babel-core": "6.26.3",
"babel-eslint": "8.2.6",
"babel-loader": "7.1.5",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",
"compression-webpack-plugin": "1.1.11",
"css-loader": "1.0.0",
"cssnano": "^4.1.7",
"empty-module": "^0.0.2",
"eslint": "^5.0.0",
"eslint-loader": "2.0.0",
"eslint-plugin-react": "7.10.0",
"file-loader": "1.1.11",
"grunt": "1.0.3",
"grunt-contrib-clean": "1.1.0",
"grunt-contrib-copy": "1.0.0",
"grunt-contrib-watch": "1.1.0",
"jit-grunt": "0.10.0",
"jshint": "2.9.5",
"jshint-loader": "0.8.4",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "7.0.3",
"style-loader": "0.21.0",
"stylelint": "9.3.0",
"stylelint-config-recommended": "2.1.0",
"stylelint-config-recommended-scss": "3.2.0",
"stylelint-config-standard": "18.2.0",
"stylelint-scss": "3.1.3",
"uglify-js": "^3.4.9",
"uglifyjs-webpack-plugin": "1.2.7",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-merge": "^4.2.1",
"webpack-shell-plugin": "^0.5.0"
},
"dependencies": {
"@aspnet/signalr": "^1.1.0",
"@tinymce/tinymce-react": "^2.2.5",
"axios": "^0.18.0",
"bootstrap": "^4.1.1",
"chart.js": "^2.7.2",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"popper.js": "^1.14.1",
"prop-types": "^15.6.0",
"react": "^16.4.1",
"react-bootstrap-table": "^4.3.1",
"react-dom": "^16.4.1",
"react-select": "^1.2.1",
"react-values": "^0.2.4",
"reactstrap": "^6.3.0",
"toastr": "^2.1.4"
}
}
【问题讨论】：
标签： reactjs asp.net-core webpack babeljs bundling-and-minification