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是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...
随机推荐
- Nginx常用命令之启动与重启
1.测试新的Nginx程序是否正确 [test@P-SH-Nginx-01 nginx]$ ./sbin/nginx -t nginx: the configuration file /usr/loc ...
- Dubbo源码(一) - SPI使用
为什么学SPI Dubbo 的可扩展性是基于 SPI 去实现的,而且Dubbo所有的组件都是通过 SPI 机制加载. 什么是SPI SPI 全称为 (Service Provider Interfac ...
- oracle删除超过N天数据脚本
公司内做的项目是工厂内的,一般工厂内数据要求的是实时性,很久之前的数据可以自行删除处理,我们数据库用的oracle,所以就想着写一个脚本来删除,这样的话,脚本不管放在那里使用都可以达到效果 由于服务器 ...
- python打开文件、文件夹窗口、终端窗口
简介 在一些项目中,我们会需要在生成完文件后打开某些文件或者文件夹窗口,这就需要使用到内置的文件打开方式了. 打开文件或文件夹 Windows import os import subprocess ...
- Java学习第五周
这周学习了异常与多线程,线程使用 Exception异常的分类: 1.编译时异常:继承自Exception的异常或者其子类,编译阶段就会报错 2.运行时异常:继承自RuntimeException的异 ...
- linux常见命令(七)
df/du/ln/lsblk/mount磁盘和目录的容量df 列出文件系统整体的磁盘使用量查看磁盘占用量并用易读的格式显示出来df -hdu 列出目录的磁盘占用量查看当前目录下每个目录/文件的占用量, ...
- [极客大挑战 2019]HardSQL-1
1.打开之后万能密码等均被过滤,那就先确定下过滤的内容,采用brup抓包进行爆破,发现对union进行了过滤,因此这里就没法使用联合注入,结果如下: 爆破得字典: ^ & && ...
- React性能优化，六个小技巧教你减少组件无效渲染
壹 ❀ 引 在过去的一段时间,我一直围绕项目中体验不好或者无效渲染较为严重的组件做性能优化,多少积累了一些经验所以想着整理成一片文章,下图就是优化后的一个组件,可以对比优化前一次切换与优化后多次切换的 ...
- 一文理解Hadoop分布式存储和计算框架入门基础
@ 目录 概述 定义 发展历史 发行版本 优势 生态项目 架构 组成模块 HDFS架构 YARN架构 部署 部署规划 前置条件 部署步骤 下载文件(三台都执行) 创建目录(三台都执行) 配置环境变量( ...
- JedisConnectionException: java.net.SocketException: Broken pipe (Write failed) 问题排查
问题描述 笔者有2个应用会不定时请求redis,其中一个应用大约每分钟请求一次,可以正常请求,但是另一个大约每小时请求一次的应用,经常出现Broken pipe (Write failed)报错,具体 ...