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是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...
随机推荐
- 字节输出流的续写和换行和字节输入流InputStream类&FileInputStream类介绍
数据追加续写 每次程序运行,创建输出流对象,都会清空目标文件中的数据.如何保目标文件中的数据,还能继续添加新数据呢? public FileOutputStream(File file,boolean ...
- YII的延迟加载
类的映射表 use app\model\order \Yii::$classMap['app\models\Order'] = "D:\wamp\www\...\models\Order.p ...
- HTML 本地缓存
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 高考集训讲课(To 高一)
高考集训讲课(To 高一) 主要是怕下午讲着讲着把自己讲懵了,有一定的迷糊概率 经过机房的讨论,一致认为插头\(DP\)实用性不大,所以这次不讲了,先把重要的讲一讲. 顺便吐槽一下,凭什么另外几个人都 ...
- 游戏开发常遇到数据一致性BUG，怎么解？
摘要:数据副本强一致.全节点可写.存储全面降本,GaussDB(for Redis)重新定义游戏数据库,彻底修复一致性BUG. 本文分享自华为云社区<华为云GaussDB(for Redis)揭 ...
- mybatis 04: mybatis对象分析 + 测试代码简化 + 配置优化
MyBatis对象分析 测试代码示例 package com.example.test; import com.example.pojo.Student; import org.apache.ibat ...
- eclipse mave无法下载jar包
解决方法: 先查看本地配置是否正确: 确保此处没有勾选 此处和自己配置的maven一致,没有则修改此处设置.然后项目上右键–>Maven–>Update Project 即可 . 如果还不 ...
- Luogu3850 [TJOI2007]书架 （平衡树）
将要插入位置前和前前splay,再连在右子树上. #include <iostream> #include <cstdio> #include <cstring> ...
- Luogu3803 【模板】多项式乘法（FFT）
为什么我这么弱 其实FFT也挺水的,一点数学基础加上细心即可.细节·技巧挺多. 递归 在TLE的边缘苦苦挣扎 #include <iostream> #include <cstdio ...
- ahooks 是怎么解决用户多次提交问题？
本文是深入浅出 ahooks 源码系列文章的第四篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本文来探索一下 ahooks 的 useLockFn.并由此讨论一 ...