Webpack simple configuration

/ / deal with HTML
const HtmlWebPackPlugin = require('html-webpack-plugin')
/ / clear the dist
const CleanWebpackPlugin = require('clean-webpack-plugin')
CSS / / separation
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
Js / / compression
const TerserJSPlugin = require('terser-webpack-plugin');
/ / compress CSS
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// Process the absolute path to the file
const path = require('path');
// Body-parser middleware handles POST request parameters
const bodyParser = require('body-parser');
Copy the code

module.exports = {
    // Import file
    entry: './src/index.js'.// entry: {
    // index: './src/index.js',
    // order: './src/order.js'
    // },

    // Export configuration
    output: {
        filename: 'assets/[name].[hash:6].js'.// The name of the generated file
        publicPath: '/dist'.path: path.join(__dirname, 'dist')  // The path to the generated file
    },

    // Load modules and configure various loaders
    module: {
        rules: [{test: /\.(sass|scss|css)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'.'sass-loader'] {},test: /\.(jpe? g|png|gif|svg)$/i,
                use: {
                    loader: 'url-loader'.options: {
                      // 1024 = 1kb
                      limit: 10240.name: 'assets/[name].[hash:6].[ext]',}}}, {test: /\.(eot|ttf|svg|woff2?) $/,
                use: ['url-loader']]}},/ / the plugin
    plugins: [
        // Empty before packing
        new CleanWebpackPlugin(),
        // Automatic injection
        new HtmlWebPackPlugin({
            template: './src/index.html'.filename: 'index.html'.inject: true
        }),
        / / CSS to pull away
        new MiniCssExtractPlugin({
            filename: 'assets/[name].css'.chunkFilename: 'assets/[id].css'})].// Service configuration
    devServer: {
        // open: true, // automatically open the browser
        port: 10001.// Specify a port number
        host: '0.0.0.0'.hot: true./ / hot update
        before(app){    // Request interception
            app.post('/loader/list', bodyParser.json(), (req, res, next) = >{
                console.log('req... ', req);
                console.log('Query parameters... ', req.query);
                console.log('body body... ', req.body)
                res.json({
                    code: 1.msg: 'Request successful'.data: ['node-sass'.'sass-loader'.'css-loader'.'file-loader'.'url-loader'.'style-loader']})})}},resolve: {
        // Configure the alias
        alias: {
            The '@': path.join(__dirname, 'src')}},// Optimized configuration
    optimization: {
        minimizer: [
            Js / / compression
            new TerserJSPlugin({}),
            / / compress CSS
            new OptimizeCSSAssetsPlugin({})
        ],
        // Package separation to separate non-business logic related packages
        splitChunks: {
            cacheGroups: {
                vendor: {   // Remove third-party plugins
                    test: /node_modules/.// specify a third-party package under node_modules
                    chunks: 'initial'.name: 'vendor'.// The packaged file name, any name
                    // Set priority to prevent and custom public code from being overridden when extracting without packaging
                    priority: 10    
                },
                utils: { // Get rid of the public code you wrote. Utils is a name you can call yourself
                    chunks: 'initial'.name: 'utils'.// Any name
                    minChunks: 2.// At least two references
                    minSize: 0    // Generate a new package whenever it exceeds 0 bytes
                }
            }
        }
    }
}
Copy the code