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="./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.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
},
三：运行打包后效果图
十一：插件应用（css-loader style-loader）
一：引入插件
npm i -D css-loader style-loader
二：编写css文件并且在ts中引入
body{
background-color: bisque;
}
import console from "./js/typescript";
//导入css,将把该css输出引用到js的位置
import './css/index.css' const x:number=200;
const y:number=100; document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`
三：编写webpack.config.js文件
module:{
//模块转换集合
rules:[
{
test: /\.css$/, //匹配所有以.css结尾的文件
use:["style-loader","css-loader"],//从后向前使用loader处理指定文件
exclude:/node_modules/ //排除掉的目录文件
},
{
test: /\.ts$/, //匹配所有以.ts结尾的文件
loader:"ts-loader",//使用ts-loader的模块转换器处理
exclude:/node_modules/ //排除掉的目录文件
},
]
},
四：打包运行效果图
十二：插件应用（node-sass sass-loader）
一：引入插件
npm i -D node-sass sass-loader
二：编写scss文件并且在ts中引入
$color:#fff;
h1{
color: $color;
text-align: center;
}
import console from "./js/typescript";
//导入css,将把该css输出引用到js的位置
import './css/index.css'
import './css/index.scss' const x:number=200;
const y:number=100; document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`
三：编写webpack.config.js
rules:[
{
test: /\.css$/, //匹配所有以.css结尾的文件
use:["style-loader","css-loader"],//从后向前使用loader处理指定文件
exclude:/node_modules/ //排除掉的目录文件
},
{
test: /\.scss$/, //匹配所有以.css结尾的文件
use:[
{loader:"style-loader"},//将css添加到js中生产的style节点中
{loader:"css-loader"},//加载css
{loader:"sass-loader"} //把scss处理成css
//倒处理，从下往上
]
},
{
test: /\.ts$/, //匹配所有以.ts结尾的文件
loader:"ts-loader",//使用ts-loader的模块转换器处理
exclude:/node_modules/ //排除掉的目录文件
},
]
四：打包运行后效果图
十三：插件应用（mini-css-extract-plugin）建议使用该方法，要不然css全放在js中js文件太大，用户打开页面就很慢
一：引入插件
npm i -D mini-css-extract-plugin
二：编写webpack.config.js文件
const MiniCssExtractPlugin=require("mini-css-extract-plugin");
添加新的new MiniCssExtractPlugin()
plugins:[
new CleanWebpackPlugin({
//指定要删除的文件类型
cleanAfterEveryBuildPatterns:["**/*.js"]
}),
new HemlWebpackPlugin({
//模板路径
template:"./src/index.html",
//打包生成的文件名
filename:"index.html",
//指定标题
title:"Webpack Demo",
}),
new MiniCssExtractPlugin()
],
替换掉所有的style.loader
rules:[
{
test: /\.css$/, //匹配所有以.css结尾的文件
use:[MiniCssExtractPlugin.loader,"css-loader"],//从后向前使用loader处理指定文件
exclude:/node_modules/ //排除掉的目录文件
},
{
test: /\.scss$/, //匹配所有以.css结尾的文件
use:[
{loader:MiniCssExtractPlugin.loader},//将css添加到独立的文件中
{loader:"css-loader"},//加载css
{loader:"sass-loader"} //把scss处理成css
//倒处理，从下往上
]
},
{
test: /\.ts$/, //匹配所有以.ts结尾的文件
loader:"ts-loader",//使用ts-loader的模块转换器处理
exclude:/node_modules/ //排除掉的目录文件
},
]
三：打包运行后的效果图
十四：插件应用（html-loader）
一：引入插件
npm i -D html-loader
二：编写webpack.config.js文件并且修改index.html以及ts文件的引入组件的方式
rules:[
{
test:/\.html$/,
use:[{
loader:"html-loader",
options:{
minimize:true //是否压缩html
}
}]
}
]
<!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><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<img src="./img/clw.jpg">
</body>
</html>
原来的ts会把我们显示的图片给刷新覆盖掉，所以这里我们要修改一下我们的ts生产组件的代码
import console from "./js/typescript";
//导入css,将把该css输出引用到js的位置
import './css/index.css'
import './css/index.scss' const x:number=200;
const y:number=100; let p=document.createElement("div");
p.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`;
document.body.appendChild(p);
三：打包运行后的效果图
webpack打包思路与流程解析的更多相关文章
- 3、webpack打包出的文件解析
分析打包后的结果,看看打包后的结果是什么东西 把打包后的结果.注释什么的删删‘’ 当前是一个匿名函数. 默认的时候会执行,执行的时候会传一个对象,对象有几部分,第一部分是我们的key.第二部分是我们的 ...
- webpack学习--创建一个webpack打包流程
创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...
- Webpack 打包优化之速度篇
在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...
- vue webpack打包
webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配 ...
- 如何使用webpack打包前端项目
webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · ...
- webpack 打包过程及常用插件
前言 要理解webpack 首先明白三个概念:module,chunk,bundles,即输入,中间态,输出. chunk: This webpack-specific term is uesd in ...
- Webpack打包进阶
说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...
- 为何webpack打包后的文件要放在服务器上才能运行
为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...
- Webpack打包构建太慢了？试试几个方法
Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...
随机推荐
- Linux(Centos7) 实例搭建 FTP 服务
本文以 CentOS 7.2 64位系统为例,使用 vsftpd 作为 FTP 服务端,FileZilla 作为客户端.指导您如何在 Linux 云服务器上搭建 FTP 服务. 操作步骤 安装 vsf ...
- Druid 查询超时配置的探究 → DataSource 和 JdbcTemplate 的 queryTimeout 到底谁生效？
开心一刻 昨晚跟我妈语音 妈:我年纪有点大了,想抱孩子了 我:妈,我都多大了,你还想抱我? 妈:我想抱小孩,谁乐意抱你呀! 我:刚好小区有人想找月嫂,要不我帮你联系下? 妈:你给我滚 然后她直接把语音 ...
- C# 基础知识-特性
C基础 - 特性 一.特性 1>特性本质就是一个类,直接或者间接的继承了Attribute 2>特性就是在不破话类封装的前提下,加点额外的信息或者行为 特性添加后,编译会在元素内部产生IL ...
- 不会提交 PR 的小伙伴看过来，超详细的视频教程！
点击上方 蓝字关注我们 作者 | 严天奇 ✎ 编 者 按 最近有一些新加入社区的朋友反馈不太了解 Apache DolphinScheduler 提交 PR 的步骤和规则.这不,人帅心美的严天奇同学就 ...
- Babylon.js 入门简介和开发实例
Babylon.js是一款WebGL开发框架,和Three.js类似. Three.js是由社区推动的,比Babylon.js要成熟些,而Babylon.js是微软推动的,和微软的相关技术结合更好. ...
- EMAS Serverless系列～4步教你快速搭建小程序
体验简介 本实验基于 EMAS Serverless 的云函数.云数据库.云存储等云服务能力一站式快速开发小程序<私人云相册>.Demo 主要包括如下功能: 1 相册管理 2 上传相片 3 ...
- YC-Framework版本更新:V1.0.9
分布式微服务框架:YC-Framework版本更新V1.0.9!!! 本文主要内容: 1.V1.0.9版本更新主要内容 2.YC-Framework新的征程 一.V1.0.9版本更新主要内容 (1)接 ...
- linux scsi相关的一些学习笔记
最近看scsi相关处理的一些备忘,比较零碎,仅作参考. 先从最显而易见的打印入手: [0:0:0:0] disk ATA INTEL SSDSC2BX20 0150 - [0:0:1:0] dis ...
- XYX错误集
(频数递减) # 数据范围:没开Long Long (*inf^2) # while 打成了 if ,if 打成了 while(*inf^2) # 换根DP:两个dfs调用错误 (*inf) # ZK ...
- 关于stm32f10xRB系列的PB5和PB12外设冲突问题
上周在公司做了一个项目,调试一个mcu,本以为很简单的调试一下裸机驱动,但是调试过程中遇到了一些问题让我觉得比较有意思,记录一下. 1.关于stm32的SMBUS功能的介绍 由于笔者也没有玩过 ...