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"
  }
}