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

一：创建一个新的工程，项目初始化
npm init -y
二：搭建项目框架

文章插图
三：编写main.js文件内容，在index.js中引入，在把index.js引入到index.html中
例：
export default()=>{function computer(){let h2=document.createElement("h2");h2.innerHTML="Hello WebPack";return h2;}document.body.appendChild(h2);}import h2 from "./js/main"h2();<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body><script src="https://www.huyubaike.com/biancheng/index.js"></script></html>四：安装打包依赖,修改函数入口
npm i -D webpack webpack-cli

文章插图
五：配置打包文件webpack.config.js，（还可以在packge.json中声明打包代码，方便运行）——可写可不写
module.exports={//入口entry:["./src/index.js"],//出口output:{//打包后的文件路径,默认也是dist文件path:__dirname+"/dist",//文件名称,这里我用hash值来命名,防止每次打包名称重复filename:"[hash].js"},//配置打包环境/生产or开发mode:"production"}

文章插图
六：打包成功后效果图

文章插图

文章插图
七：插件应用（webpack-plugins）自动引入打包好的外部文件
一：引入插件
npm i -D html-webpack-plugin

文章插图
二：在webpack.config.json文件中引入该插件并使用
const HemlWebpackPlugin =require("html-webpack-plugin")module.exports={//入口entry:["./src/index.js"],//出口output:{//打包后的文件路径,默认也是dist文件path:__dirname+"/dist",//文件名称,这里我用hash值来命名,防止每次打包名称重复filename:"[hash].js"},//使用html-webpack-plugin插件plugins:[new HemlWebpackPlugin({//模板路径template:"./src/index.html",//打包生成的文件名filename:"index.html",//指定标题title:"Webpack Demo",})],//配置打包环境/生产or开发mode:"development"}三：运行打包后的效果图

文章插图
八：插件应用（Ts）
一：编写index.ts文件
export default(x:number,y:number):number=>{return x+y;}二：编写tsconfig.json文件
{"compilerOptions": {//Es的目标版本"target": "es2015",//模板化规范版本"module": "es2015",//是否总是启用严格模式"alwaysStrict": true}}
三：编写webpack.config.js文件并且修改packjson.js中的入口
const HemlWebpackPlugin =require("html-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 HemlWebpackPlugin({//模板路径template:"./src/index.html",//打包生成的文件名filename:"index.html",//指定标题title:"Webpack Demo",})],//配置打包环境/生产or开发mode:"development"}

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

文章插图

文章插图
九：插件应用（clean-webpack-plugin）打包后自动清理旧版本文件
一：引入插件
npm i -D clean-webpack-plugin
【webpack打包思路与流程解析】

文章插图
二：编写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"}