一:创建一个新的工程,项目初始化

npm init -y

二:搭建项目框架

三:编写main.js文件内容,在index.js中引入,在把index.js引入到index.html中

例:

  1. export default()=>{
  2. function computer(){
  3. let h2=document.createElement("h2");
  4. h2.innerHTML="Hello WebPack";
  5. return h2;
  6. }
  7. document.body.appendChild(h2);
  8. }
  1. import h2 from "./js/main"
  2. h2();
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10.  
  11. </body>
  12. <script src="./index.js"></script>
  13. </html>

四:安装打包依赖,修改函数入口

npm i -D webpack webpack-cli

五:配置打包文件webpack.config.js,(还可以在packge.json中声明打包代码,方便运行)——可写可不写

  1. module.exports={
  2. //入口
  3. entry:["./src/index.js"],
  4. //出口
  5. output:{
  6. //打包后的文件路径,默认也是dist文件
  7. path:__dirname+"/dist",
  8. //文件名称,这里我用hash值来命名,防止每次打包名称重复
  9. filename:"[hash].js"
  10. },
  11. //配置打包环境/生产or开发
  12. mode:"production"
  13. }

六:打包成功后效果图

七:插件应用(webpack-plugins)自动引入打包好的外部文件

  一:引入插件

    npm i -D html-webpack-plugin

    

  二:在webpack.config.json文件中引入该插件并使用

  1. const HemlWebpackPlugin =require("html-webpack-plugin")
  2.  
  3. module.exports={
  4. //入口
  5. entry:["./src/index.js"],
  6. //出口
  7. output:{
  8. //打包后的文件路径,默认也是dist文件
  9. path:__dirname+"/dist",
  10. //文件名称,这里我用hash值来命名,防止每次打包名称重复
  11. filename:"[hash].js"
  12. },
  13. //使用html-webpack-plugin插件
  14. plugins:[
  15. new HemlWebpackPlugin({
  16. //模板路径
  17. template:"./src/index.html",
  18. //打包生成的文件名
  19. filename:"index.html",
  20. //指定标题
  21. title:"Webpack Demo",
  22. })
  23. ],
  24. //配置打包环境/生产or开发
  25. mode:"development"
  26. }

  三:运行打包后的效果图

    

八:插件应用(Ts)

  一:编写index.ts文件

  1. export default(x:number,y:number):number=>{
  2. return x+y;
  3. }

  二:编写tsconfig.json文件

  1. {
  2. "compilerOptions": {
  3. //Es的目标版本
  4. "target": "es2015",
  5. //模板化规范版本
  6. "module": "es2015",
  7. //是否总是启用严格模式
  8. "alwaysStrict": true
  9. }
  10. }

 

  三:编写webpack.config.js文件并且修改packjson.js中的入口

  1. const HemlWebpackPlugin =require("html-webpack-plugin")
  2.  
  3. module.exports={
  4. //入口
  5. entry:["./src/index.ts"],
  6. //出口
  7. output:{
  8. //打包后的文件路径,默认也是dist文件
  9. path:__dirname+"/dist",
  10. //文件名称,这里我用hash值来命名,防止每次打包名称重复
  11. filename:"[hash].js"
  12. },
  13. //模块处理
  14. module:{
  15. //模块转换集合
  16. rules:[
  17. {
  18. test: /\.ts$/, //匹配所有以.ts结尾的文件
  19. loader:"ts-loader",//使用ts-loader的模块转换器处理
  20. exclude:/node_modules/ //排除掉的目录文件
  21. },
  22. ]
  23. },
  24. //模块解析处理
  25. resolve:{
  26. //解析所有以.js/.ts结尾的文件
  27. extensions:[".js",".ts"]
  28. },
  29. //使用html-webpack-plugin插件
  30. plugins:[
  31. new HemlWebpackPlugin({
  32. //模板路径
  33. template:"./src/index.html",
  34. //打包生成的文件名
  35. filename:"index.html",
  36. //指定标题
  37. title:"Webpack Demo",
  38. })
  39. ],
  40. //配置打包环境/生产or开发
  41. mode:"development"
  42. }

    

  四:运行打包效果图

    

    

九:插件应用(clean-webpack-plugin)打包后自动清理旧版本文件

  一:引入插件

    npm i -D clean-webpack-plugin

    

  二:编写webpack.config.js

  1. const HemlWebpackPlugin =require("html-webpack-plugin");
  2. const {CleanWebpackPlugin}=require("clean-webpack-plugin");
  3.  
  4. module.exports={
  5. //入口
  6. entry:["./src/index.ts"],
  7. //出口
  8. output:{
  9. //打包后的文件路径,默认也是dist文件
  10. path:__dirname+"/dist",
  11. //文件名称,这里我用hash值来命名,防止每次打包名称重复
  12. filename:"[hash].js"
  13. },
  14. //模块处理
  15. module:{
  16. //模块转换集合
  17. rules:[
  18. {
  19. test: /\.ts$/, //匹配所有以.ts结尾的文件
  20. loader:"ts-loader",//使用ts-loader的模块转换器处理
  21. exclude:/node_modules/ //排除掉的目录文件
  22. },
  23. ]
  24. },
  25. //模块解析处理
  26. resolve:{
  27. //解析所有以.js/.ts结尾的文件
  28. extensions:[".js",".ts"]
  29. },
  30. //使用html-webpack-plugin插件
  31. plugins:[
  32. new CleanWebpackPlugin({
  33. //指定要删除的文件类型
  34. cleanAfterEveryBuildPatterns:["**/*.js"]
  35. }),
  36. new HemlWebpackPlugin({
  37. //模板路径
  38. template:"./src/index.html",
  39. //打包生成的文件名
  40. filename:"index.html",
  41. //指定标题
  42. title:"Webpack Demo",
  43. })
  44. ],
  45. //配置打包环境/生产or开发
  46. mode:"development"
  47. }

  三:运行打包效果图(自动删除了旧版本的文件)

    

十:插件应用(webpack-dev-server)配置服务器打包完成后自动启动页面,并且可以开启热模块替换

  一:引入插件

    npm i -D webpack-dev-server

    

  

  二:编写webpack.config.js文件,运行server的命令也可以打包到packjson.js中——可写可不写

  1. devServer:{
  2. //是否自动打开
  3. open:true,
  4. historyApiFallback: true,
  5. //是否使用热模块替换
  6. hot: true,
  7. //是否压缩
  8. compress: true,
  9. //地址
  10. host: "本地地址——cmd=>ipconfig查看",
  11. //端口
  12. port: 8089
  13. },

     

  三:运行打包后效果图

    

十一:插件应用(css-loader style-loader)

  一:引入插件

    npm i -D css-loader style-loader

    

  二:编写css文件并且在ts中引入

  1. body{
  2. background-color: bisque;
  3. }
  1. import console from "./js/typescript";
  2. //导入css,将把该css输出引用到js的位置
  3. import './css/index.css'
  4.  
  5. const x:number=200;
  6. const y:number=100;
  7.  
  8. document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`

  三:编写webpack.config.js文件

  1. module:{
  2. //模块转换集合
  3. rules:[
  4. {
  5. test: /\.css$/, //匹配所有以.css结尾的文件
  6. use:["style-loader","css-loader"],//从后向前使用loader处理指定文件
  7. exclude:/node_modules/ //排除掉的目录文件
  8. },
  9. {
  10. test: /\.ts$/, //匹配所有以.ts结尾的文件
  11. loader:"ts-loader",//使用ts-loader的模块转换器处理
  12. exclude:/node_modules/ //排除掉的目录文件
  13. },
  14. ]
  15. },

  

  四:打包运行效果图

    

十二:插件应用(node-sass sass-loader)

  一:引入插件

    npm i -D node-sass sass-loader

    

  二:编写scss文件并且在ts中引入

  1. $color:#fff;
  2. h1{
  3. color: $color;
  4. text-align: center;
  5. }
  1. import console from "./js/typescript";
  2. //导入css,将把该css输出引用到js的位置
  3. import './css/index.css'
  4. import './css/index.scss'
  5.  
  6. const x:number=200;
  7. const y:number=100;
  8.  
  9. document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`

  三:编写webpack.config.js 

  1. rules:[
  2. {
  3. test: /\.css$/, //匹配所有以.css结尾的文件
  4. use:["style-loader","css-loader"],//从后向前使用loader处理指定文件
  5. exclude:/node_modules/ //排除掉的目录文件
  6. },
  7. {
  8. test: /\.scss$/, //匹配所有以.css结尾的文件
  9. use:[
  10. {loader:"style-loader"},//将css添加到js中生产的style节点中
  11. {loader:"css-loader"},//加载css
  12. {loader:"sass-loader"} //把scss处理成css
  13. //倒处理,从下往上
  14. ]
  15. },
  16. {
  17. test: /\.ts$/, //匹配所有以.ts结尾的文件
  18. loader:"ts-loader",//使用ts-loader的模块转换器处理
  19. exclude:/node_modules/ //排除掉的目录文件
  20. },
  21. ]

  四:打包运行后效果图

    

十三:插件应用(mini-css-extract-plugin)建议使用该方法,要不然css全放在js中js文件太大,用户打开页面就很慢

  一:引入插件

    npm i  -D mini-css-extract-plugin

    

  二:编写webpack.config.js文件

  1. const MiniCssExtractPlugin=require("mini-css-extract-plugin");  

    添加新的new MiniCssExtractPlugin()

  1. plugins:[
  2. new CleanWebpackPlugin({
  3. //指定要删除的文件类型
  4. cleanAfterEveryBuildPatterns:["**/*.js"]
  5. }),
  6. new HemlWebpackPlugin({
  7. //模板路径
  8. template:"./src/index.html",
  9. //打包生成的文件名
  10. filename:"index.html",
  11. //指定标题
  12. title:"Webpack Demo",
  13. }),
  14. new MiniCssExtractPlugin()
  15. ],

    替换掉所有的style.loader

  1. rules:[
  2. {
  3. test: /\.css$/, //匹配所有以.css结尾的文件
  4. use:[MiniCssExtractPlugin.loader,"css-loader"],//从后向前使用loader处理指定文件
  5. exclude:/node_modules/ //排除掉的目录文件
  6. },
  7. {
  8. test: /\.scss$/, //匹配所有以.css结尾的文件
  9. use:[
  10. {loader:MiniCssExtractPlugin.loader},//将css添加到独立的文件中
  11. {loader:"css-loader"},//加载css
  12. {loader:"sass-loader"} //把scss处理成css
  13. //倒处理,从下往上
  14. ]
  15. },
  16. {
  17. test: /\.ts$/, //匹配所有以.ts结尾的文件
  18. loader:"ts-loader",//使用ts-loader的模块转换器处理
  19. exclude:/node_modules/ //排除掉的目录文件
  20. },
  21. ]

  三:打包运行后的效果图

    

十四:插件应用(html-loader)

  一:引入插件

    npm i -D html-loader

    

  二:编写webpack.config.js文件并且修改index.html以及ts文件的引入组件的方式

  1. rules:[
  2. {
  3. test:/\.html$/,
  4. use:[{
  5. loader:"html-loader",
  6. options:{
  7. minimize:true //是否压缩html
  8. }
  9.  }]
  10. }
  11. ]
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title><%=htmlWebpackPlugin.options.title%></title>
  8. </head>
  9. <body>
  10. <img src="./img/clw.jpg">
  11. </body>
  12. </html>

原来的ts会把我们显示的图片给刷新覆盖掉,所以这里我们要修改一下我们的ts生产组件的代码

  1. import console from "./js/typescript";
  2. //导入css,将把该css输出引用到js的位置
  3. import './css/index.css'
  4. import './css/index.scss'
  5.  
  6. const x:number=200;
  7. const y:number=100;
  8.  
  9. let p=document.createElement("div");
  10. p.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`;
  11. document.body.appendChild(p);

  三:打包运行后的效果图

    

webpack打包思路与流程解析的更多相关文章

  1. 3、webpack打包出的文件解析

    分析打包后的结果,看看打包后的结果是什么东西 把打包后的结果.注释什么的删删‘’ 当前是一个匿名函数. 默认的时候会执行,执行的时候会传一个对象,对象有几部分,第一部分是我们的key.第二部分是我们的 ...

  2. webpack学习--创建一个webpack打包流程

    创建一个webpack打包流程 首先安装webpack插件 mkdir webpack-demo && cd webpack-demo npm init -y npm install ...

  3. Webpack 打包优化之速度篇

    在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...

  4. vue webpack打包

    webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配 ...

  5. 如何使用webpack打包前端项目

    webpack概述 随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而 webpack就是用于将前端各种文件打包起来. 一个简单的webpack应该包含以下几个概念 · 入口起点 · ...

  6. webpack 打包过程及常用插件

    前言 要理解webpack 首先明白三个概念:module,chunk,bundles,即输入,中间态,输出. chunk: This webpack-specific term is uesd in ...

  7. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  8. 为何webpack打包后的文件要放在服务器上才能运行

    为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...

  9. Webpack打包构建太慢了?试试几个方法

    Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...

随机推荐

  1. tarjan算法和缩点

    tarjan可以找强连通的分量,但它的作用不只局限于此 缩点,说白了,就是建新图,之后的操作在新图上进行 自己看代码 #include<bits/stdc++.h> using names ...

  2. 【水】关于 __attribute__

    目录 1. weak 2. aligned 3. __packed__ 4. always_inline 1. weak 实现如果 Func1 被定义了,我就调用 Func1, 否则就调用 MyFun ...

  3. odoo 14 Debug 调试

    1 # PDB的用法 2 # PDB是用来调试运行代码的. 3 # 如何启动PDB(启动之后你可以调用odoo任何模块中的方法) 4 # ./odoo-bin shell --log-level=de ...

  4. Modbus转Profinet网关案例 | 三菱FR-A700系列变频器配置方法

    本案例是利用小疆智控Modbus转Profinet网关GW-PN5001把三菱FR-A700变频器接入到西门子1200PLC.实现Profinet转Modbus的通讯协议的互转. 用到设备有:三菱FR ...

  5. io几乎没有,iowait却很高

    遇到如下一种情况: top - 09:43:03 up 2 days, 22:48, 9 users, load average: 133.19, 132.60, 132.32 Tasks: 767 ...

  6. Linux—进程管理

    Linux 进程管理 1.进程管理介绍 1.1 什么是进程? 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础. 简而言之 ...

  7. pydantic 支持Dotenv 文件设置变量

    1. 安装 pip install pydantic pip install pydantic[dotenv] 注意: 安装pip install pydantic[dotenv]时会提示no mat ...

  8. CF662C Binary Table (快速沃尔什变换FWT)

    题面 题解 我们会发现,如果单独的一列或一行,它的答案是O1确定的,如果确定了每一行是否变换,那么最后的答案也就简单了许多, 如果确定了行的变换状压下来是x(即x的i位表示第i行是否变换,理解就行), ...

  9. 1.1_selenium+Python自动化测试大纲

  10. XXL-JOB最佳实践与升级指南

    前言: xxl-job是国内一款使用者比较多的分布式任务调度平台,我们内部从19年开始使用该款开源软件,使用的是2.0.1版本,并在此基础上做了二次开发,添加了一些定制化的功能.随着使用该定时器的业务 ...