webpack打包思路与流程解析( 二 ) _生活百科

文章插图
四：运行打包效果图

文章插图

文章插图
九：插件应用（clean-webpack-plugin）打包后自动清理旧版本文件
一：引入插件
npm i -D clean-webpack-plugin

文章插图
二：编写webpack.config.js
const HemlWebpackPlugin =require("html-webpack-plugin");const {CleanWebpackPlugin}=require("clean-webpack-plugin");module.exports={//入口entry:["./src/index.ts"],//出口output:{//打包后的文件路径,默认也是dist文件path:__dirname+"/dist",//文件名称,这里我用hash值来命名,防止每次打包名称重复filename:"[hash].js"},//模块处理module:{//模块转换集合rules:[{test: /\.ts$/, //匹配所有以.ts结尾的文件loader:"ts-loader",//使用ts-loader的模块转换器处理exclude:/node_modules/ //排除掉的目录文件},]},//模块解析处理resolve:{//解析所有以.js/.ts结尾的文件extensions:[".js",".ts"]},//使用html-webpack-plugin插件plugins:[new CleanWebpackPlugin({//指定要删除的文件类型cleanAfterEveryBuildPatterns:["**/*.js"]}),new HemlWebpackPlugin({//模板路径template:"./src/index.html",//打包生成的文件名filename:"index.html",//指定标题title:"Webpack Demo",})],//配置打包环境/生产or开发mode:"development"}三：运行打包效果图（自动删除了旧版本的文件）

文章插图
十：插件应用（webpack-dev-server）配置服务器打包完成后自动启动页面，并且可以开启热模块替换
一：引入插件
npm i -D webpack-dev-server

文章插图

二：编写webpack.config.js文件，运行server的命令也可以打包到packjson.js中——可写可不写
devServer:{//是否自动打开open:true,historyApiFallback: true,//是否使用热模块替换hot: true,//是否压缩compress: true,//地址host: "本地地址——cmd=>ipconfig查看",//端口port: 8089},