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": "huaicheng151201@163.com", "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" } }
