基于webpack.config.js和babel.config.js及package.json构建项目的demo

Posted 2020-11-24 jimaww

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‘),
        },
        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"
    }
}