webpack.config.js的内容如下const HtmlWebpackPlugin = require('html-webpack-plugin');const Webpack = require("webpack");const ConcatPlugin = require('webpack-concat-plugin');
const CopyPlugin = require('copy-webpack-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/"
},
devtool: "eval-source-map", 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" } }