webpack.config.js的内容如下const HtmlWebpackPlugin = require('html-webpack-plugin');const Webpack = require("webpack");const ConcatPlugin = require('webpack-concat-plugin');
);
const Path = require('path');
const ImageInlineSizeLimit = 10000;
module.exports = (env, argv) => {
const isDev = 'development' === argv['mode'];
return {
entry: {
init_global: './src/global.js',
app: './src/app.js'
},
module: {
rules: [{
test: [/\.js$/, /\.jsx$/],
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.css|scss$/, //*.global.css->不开启css-loader modules
loader: 'style-loader!css-loader!sass-loader'
},
/*{
test: /^(?!.*\.global).*\.css/, //*.global.css->不开启css-loader modules
loader: 'style-loader!css-loader?modules'
}, {
test: /^(.*\.global).*\.css/, //*.css->开启css-loader modules
loader: 'style-loader!css-loader'
},*/
{
test: /\.xml$/,
loader: 'raw-loader'
}, {
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: ImageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
}
]
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
},
devServer: {
contentBase: Path.join(__dirname, 'public'),
publicPath: "/design-studio/"
},
,
plugins: [new HtmlWebpackPlugin({
filename: 'index.html',
//按顺序引入
inject: false,
template: 'src/assets/index.html'
}), new ConcatPlugin({
uglify: !isDev,
sourceMap: false,
injectType: "none",
name: 'editor',
fileName: '[name].[hash:8].js',
filesToConcat: [
'mxgraph/javascript/mxClient.js',
Path.resolve(__dirname, 'src/thirdparty/editor/sanitizer/sanitizer.min.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/Editor.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/EditorUi.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/Graph.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/Actions.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/Dialogs.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/Format.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/Menus.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/Shapes.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/Sidebar.js'),
Path.resolve(__dirname, 'src/thirdparty/editor/js/Toolbar.js'),
]
}), new CopyPlugin([{
from: Path.resolve(__dirname, 'public/static'),
to: "static",
toType: 'dir',
}])]
}
};
babel.config.js的内容如下：
module.exports = { presets: [ ['@babel/preset-env', { targets: { node: 'current', }, }], '@babel/preset-react' ], plugins: [ "@babel/plugin-proposal-class-properties" ] };
package.json的依赖如下：
{ "name": "design-studio", "version": "1.0.0", "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production" }, "devDependencies": { "@babel/cli": "7.6.0", "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-core": "6.26.3", "babel-loader": "8.0.6", "babel-plugin-transform-runtime": "6.23.0", "babel-preset-env": "1.7.0", "babel-preset-react": "6.24.1", "babel-preset-stage-0": "6.24.1", "copy-webpack-plugin": "5.0.4", "css-loader": "3.2.0", "file-loader": "4.2.0", "html-webpack-plugin": "3.2.0", "raw-loader": "3.1.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "url-loader": "2.1.0", "webpack": "4.40.2", "webpack-cli": "3.3.9", "webpack-concat-plugin": "3.0.0", "webpack-dev-server": "3.8.1", "node-sass": "^4.13.0" }, "dependencies": { "axios": "0.19.0", "bootstrap": "4.3.1", "mxgraph": "4.0.4", "react": "16.10.1", "react-dom": "16.10.1", "react-jsonschema-form": "1.8.0" } }