Large front-end structures commonly used commands

　　cnpm install --save ***** // middleware installed a scaffolding needed for the operation

       cnpm install --save-dev **** // installing a development process dependent middleware

　　rm -r -f **** // forced to delete a folder, used to delete directories node_modules

　　webpack // packed instruction

　　webpack-dev-server --open // start testing the service, and open the browser

 

webpack used is as follows:

var path = require('path');

const config = {
    entry: "./src/index.tsx",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist"
    },
    devtool: 'source-map',
    mode: 'production', // 'production',//development
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [{
                test: /\.js$/,
                enforce: 'pre',
                exclude: /node_modules/,
                loader: 'source-map-loader'
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader'],
                exclude: /antd\/dist/
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: [{
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    },
                    {
                        Loader: 'less-Loader', 
                        Options: { 
                Loader:?. 'URL Loader-name = & limit = 8192 / IMG / [the hash] [name] . [ext] '
                            importLoaders:. 1, 
                            JavascriptEnabled: to true 
                        } 
                    } 
                ] 
            }, 
            { 
                test: /\.tsx?$/, 
                Loader: 'TS-Loader', 
                the exclude: / the node_modules / 
            }, 
            { 
                // less than 8KB provided with base64 images associated 
                test : /\.(png|jpg)$/, 
                the exclude: / the node_modules /, 
            }, 
            { 
                Test: /\.(eot|woff|ttf|svg)$/, 
                the exclude: / the node_modules /, 
                Loader: "? File-name = Loader / IconFont / [the hash] [EXT]." 
            }, 
            { 
                Test: /\.(js)$/, 
                the exclude: / the node_modules /, 
                Loader: "File-Loader? = name / JS / [name] [EXT]. " 
            } 
        ] 
    }, 
    devserver: { 
        Port: 9001, 
        watchContentBase: to true 
    }, 
    externals: {// middleware will not react to the bundle pack, with the development of the middleware 
        / / 'REACT': 'React', 
        // 'DOM-REACT': 'ReactDOM', 
        // 'antd': 'antd' 
    } 
}; 
module.exports = config;