Webpack脚手架

config

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
const IsDEV = process.env.NODE_ENV === 'development';
const { loader } = require('mini-css-extract-plugin');
module.exports = {
    entry: resolve(__dirname, '../src/app.js'),
    plugins: [
        new HtmlWebpackPlugin(
            {
                title: 'App',
                template: resolve(__dirname, '../public/index.html'),
                minify: {
                    //折叠
                    collapseWhitespace: true,
                    removeComments: true
                }
            }
        )
    ],
    module: {
        rules: [
            {
                test: /\.s?[c]ss$/i,
                use: [
                    IsDEV ? 'style-loader' : loader,
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: '../dist/images',
                            publicPath: '/images'
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: '../dist/font',
                            publicPath: '/font'
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: [
                    // { 多进程 代码多使用
                    //     loader:'thread-loader',
                    //       options:{workers:2}//设置进程
                    //     },
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true
                        }
                    }],
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.css'],
        modules: [resolve(__dirname, '../node_modules'), 'node_modules']
    }
}

dev

const config = require('./webpack.config');
const merge = require('webpack-merge');
module.exports = merge(config, {
    devtool: 'souce-map',
    devServer: {
        contentBase: './src',
        hot: true,
        open: true,
        port: 4040,
        compress: true,
        clientLogLevel: 'silent'
    }
});

build

const config = require('./webpack.config');
const merge = require('webpack-merge');
const MiniCssextractPlugin = require('mini-css-extract-plugin');
const { resolve } = require('path');
const optimizecsswebpackplugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const terserwebpackplugin = require('terser-webpack-plugin');
module.exports = merge(config, {
    mode: 'production',
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssextractPlugin({
            filename: 'css/style.[contenthash].css'
        }),
        new optimizecsswebpackplugin()
    ],
    output: {
        filename: 'js/[name].[contenthash].js',
        path: resolve(__dirname, '../dist'),
        publicPath: '/'
    },
    optimization: {
        minimizer: [
        new terserwebpackplugin({
          cache: true,
          parallel: true 
        })],
        splitChunks: {
          chunks: 'all',
          minSize: 30000,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          name: true,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendor',
              chunks: 'all',
            }
          },
        },
      },
});

pack.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "NODE_ENV=development webpack-dev-server --config  ./config/webpack.dev.js",
    "build": "NODE_ENV=production webpack --config ./config/webpack.prod.js "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.4",
    "terser-webpack-plugin": "^2.3.5",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  }
}

.babelrc

{
    "presets": [
        [
            "@babel/preset-env"
        ]
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}