webpack4 demo

webpack.config.js 

const path = require("path");

const webpack = require("webpack");
const packagejson = require("./package.json");

const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin');



module.exports = {
    entry: {
        index: "./scripts/main.js", //入口文件，若不配置webpack4将自动查找src目录下的index.js文件
    },
    output: {
        filename: "[name].bundle.[hash].js",//输出文件名，[name]表示入口文件js名
        chunkFilename: "[name].chunk.[hash].js",
        path: path.resolve(__dirname, "dist")//输出文件路径
    },
    devServer: {//配置此静态文件服务器，可以用来预览打包后项目
        inline:true,//打包后加入一个websocket客户端
        hot:true,//热加载
        contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录
        host: '0.0.0.0',//主机地址
        port: 9090,//端口号
        compress: true//开发服务器是否启动gzip等压缩
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    module: { // 处理对应模块
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                  }
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]//处理css
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'images/',//输出到images文件夹
                        limit:500  //是把小于500B的文件打成Base64的格式，写入JS
                    }
                }]
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [// 对应的插件
        new HtmlWebpackPlugin({ //配置
            hash:true, //向html引入的src链接后面增加一段hash值,消除缓存
            title: "webpack demo",
            meta: {},
            filename: 'index.html',//输出文件名
            template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件
            //对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩
            minify:{
                removeComments:true, // 去除注释
                collapseWhitespace: true //是否去除空格
            }
        }),
        new CleanWebpackPlugin(), //传入数组,指定要删除的目录

    ],
    optimization: {
        runtimeChunk: {
            name: 'manifest'
        },
        splitChunks: {
            chunks: 'async',//默认只作用于异步模块，为`all`时对所有模块生效,`initial`对同步模块有效
            minSize: 20000, //合并前模块文件的体积
            minChunks: 1,//最少被引用次数
            maxAsyncRequests: 5, //对于异步模块，生成的公共模块文件不能超出5个
            maxInitialRequests: 3, //对于入口模块，抽离出的公共模块文件不能超出3个
            name: false,
            cacheGroups: {
                commons: {  // 多页应用，抽离自己写的公共代码
                    chunks: "all",
                    name: "common", // 打包后的文件名，任意命名
                    minChunks: 2,//最小引用2次
                    minSize: 1, // 只要超出1字节就生成一个新包
                    enforce: true //强制生成
                },
                vendor: {   // 抽离第三方插件，单独打包在同一个文件
                    test: /node_modules/,   // 指定是node_modules下的第三方包, window下： /[\\/]node_modules[\\/]/
                    chunks: "initial",
                    name: 'vendor',
                    // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包
                    priority: 10,
                    enforce: true //强制生成
                },
                styles: {
                    name: 'styles',
                    test: /\.(less|scss|css)$/,
                    chunks: 'all',
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true
                }
            }
        }
    },

}

package.json 

{
  "name": "webpack4demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server --open --inline",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "[email protected]",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "jquery": "^3.4.0",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "vue": "^2.6.10",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0-beta.0",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^2.0.1",
    "compression-webpack-plugin": "^2.0.0",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "gzip-loader": "0.0.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.4.3",
    "typescript": "^3.4.5",
    "url-loader": "^1.1.2"
  }
}