webpack打包文件过程

快来打我* 2022-05-08 06:14 326阅读 0赞

**webpack打包**

**1)安装webpack**  
     $ npm install webpack webpack-cli --save-dev

**2)添加配置文件  webpack.config.js**

![70][]

**3) 为package.json添加脚本**  
                项目信息  
                依赖信息  
                    产品依赖 --save  
                    开发依赖 --save-dev  
                脚本信息  
                    scripts

![70 1][]

**4) 执行打包**  
                $ npm run build    出现dist文件夹

![70 2][]

**  因为webpack仅仅负责打包，对es6还未进行转换，所以还需安装babel，进行打包的啥时候转换为es5**

** 5) 安装babel-core babel-loader**  
                $ npm install babel-core babel-loader --save--dev

**6) 安装预设 babel-preset-latest**  
                $ npm install babel-preset-latest --save-dev

**  7) 配置babel的配置文件 .babelrc **

**   vi  .babelrc**  
                \{  
                    "presets":\["latest"\]  
                \}

**  8) 在webpack中集成**

**开发一个模块项目的过程**  
        1. 创建模块项目  
        2. 使用模块化进行编程  
        3. 打包模块形成 bundle.js  
        4. 将bundle.js集成到index.html中  
        5. 在浏览器上运行

[70]: /images/20220508/d8210abcb92740a9a6780ee693405147.png
[70 1]: /images/20220508/f43d4e6804374db8a34f04d7acd010b4.png
[70 2]: /images/20220508/699241e8900b4a47add398445bfc7ff7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack打包优化(webpack打包优化文件大小)

webpack 打包怎么优化的解决webpack打包的文件体积过大的问题：确实，每次打包从入口开始，会parse所有的依赖，多的时候竟然打包一次要2秒多，简直不能忍

喜欢ヅ旅行/ 2023年09月26日 14:37/ 0 赞/ 6 阅读

相关 Webpack安装配置及打包详细过程

引言前端经过漫长的发展，涌现出了很多实践方法来处理复杂的工作流程，让开发变得更加简便，其中，模块化可以使复杂的程序细化成为各个小的文件，而webpack并不强制你使用某

- 日理万妓/ 2023年08月17日 17:20/ 0 赞/ 135 阅读

相关 webpack 打包html文件

webpack 打包html文件 `webpack.config.js`配置文件内容为： / loader: 1. 下载 2. 使用（配置）

一时失言乱红尘/ 2023年01月09日 03:43/ 0 赞/ 241 阅读

相关 webpack不打包mysql_简单使用webpack打包文件的实现

简单使用webpack打包文件的实现发布时间：2020-09-07 21:57:05 来源：脚本之家阅读：80 作者：逸轩没有安装node的同学请先安装node

快来打我*/ 2022年11月06日 00:03/ 0 赞/ 257 阅读

相关 webpack入门（六）：webpack 打包 css文件

上一篇，我们说了使用webpack.config.js 来设置webpack，而且之前我们也了解了如何打包 js 文件，现在我们看看如何打包 .css文件：老规矩，一步

朴灿烈づ我的快乐病毒、/ 2022年05月28日 00:39/ 0 赞/ 327 阅读

相关 webpack入门（四）：webpack打包 js 文件

我们首先知道webpack是处理 js 的工具，那么就不能处理 css 等其它文件了么？不是的，webpack可以通过 loader 处理很多类型的文件；我们

待我称王封你为后i/ 2022年05月28日 00:25/ 0 赞/ 437 阅读

相关 webpack打包

进入工作空间,npm run build,打一下生产的包打包完之后,会生成一个dist目录 ![70][] static是静态文件的存放地址在config目录

╰半夏微凉°/ 2022年05月09日 05:12/ 0 赞/ 347 阅读

相关 webpack打包文件过程

webpack打包 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 we

快来打我*/ 2022年05月08日 06:14/ 0 赞/ 327 阅读

相关 WebPack打包

一、用webpack打包新建一个文件夹 webpack-demo 1. 初始化 npm 执行命令 $ npm init （只生成一个package.json文件） !

一时失言乱红尘/ 2021年11月16日 23:40/ 0 赞/ 596 阅读

相关 webpack4 打包样式文件

1、添加loader (1)下载对应loader包 (2)下载后,使用时要注意顺序 style-loader, 创建style标签,将j

￡神魔★判官ぃ/ 2021年07月24日 17:58/ 0 赞/ 425 阅读