摘要：在终端中使用可以自动创建这个文件输入这个命令后，终端会问你一系列问题。百度后发现引入了模式，有三个状态，开发模式生产模式无。
什么是webpack，为什么要使用webapck
*
导语之前一直忙着项目，没时间整理自己的东西，最近刚好发现自己对webpack又如此陌生了，于是整理了一篇关于webpack初探的干货，这里是一点简单的webpack配置
为什么使用webpck现今很多网页其实都是可以看做功能丰富的应用，它们拥有着复杂的
javaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出很多很好的实践方法
模块化，让我们可以把复杂的文件细小化为小的文件
类似于TypeScript这种在JavaScript基础上拓展的开发语言，使我们能够实现目前的版本javaScript不能直接使用的特性，并且之后还能转换为javaScript文件使浏览器识别
Scss less等CSS预处理器
这些改进确实大大的提高了我们的开发效率，但在利用他们开发的文件往往需要额外处理才能让浏览器识别，而手动处理又是非常繁琐的，这就为webpack类的工具出现提供了需求
什么是webpackWebpack可以看做是模块打包机，它做的事情是，分析你的项目结构，找到Javascript模块以及其他的一些浏览器不能直接直接运行的拓展语言，并将其打包成合适的格式以供浏览器使用
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端开发流程的 工具，而webpack是一种模块化的解决方案，不过webpack的优点是使得Webpack可以替代Gulp/Grunt工具
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的步骤，这个工具之后可以帮你完成
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件，Wenpack将从这个文件开始找到你的项目的所有依赖文件，使用loader处理他们，最后打包成一个javascript可以识别的文件
webpack处理速度更快更加直接
开始使用webpackwebpack可以使用npm安装（最好使用全局安装）
//全局安装 npm install -g webpack //局部安装 npm install --save-dev webpack
在当前文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含丰富的信息，包括当前项目的依赖模块，自定义脚本任务等。在终端中使用npm init可以自动创建这个文件
npm init
//输入这个命令后，终端会问你一系列问题。诸如项目名称，项目描述，作者等信息，不过不用担心，如果不准备在npm中发布你的模块，这些问题的答案不重要，默认即可
package.json文件以及就绪，我们在本项目中安装webpack作为依赖包，
在根目录下创建两个空文件夹，一个是用来存放我们编写的文件，另外一个是存放webpack打包后的数据，项目目录结构如下所示：
正确使用webpack
在终端中使用最基础的命令是：
webpack {entry file/入口文件} {denstionation for bundled file/出口文件}
高版本webpack上面命令不适用，为
webpack {entry file/入口文件} {denstionation for bundled file/出口文件}
webpack data/main.js -o webpack-data/main.bundle.js
只需要指定一个入口，webpack将会自动识别项目所依赖的文件，当webpack没有进行全局安装时，需要进入到webpack的打包文件夹下进行打包
node_nodules/.bin
结果如下：
dist下的文件为项目直接运行文件，如果项目要放到服务器上可以直接把dist文件放上去
到现在为止webpack已经成功打包好了一个文件了，但是我们会感觉还是很麻烦，请看下文
标题的意思很简单，就是我们能不能使用npm的命令就可以执行我们想要的打包呢。不止如此，而且我们想要webpack更高级的功能（loaders和plugins）也通过一个命令就搞定，既然如此我们为什么不定义一个配置文件呢，我们只要把我们想要做的都放在这里面，然后我们执行命令的时候它自动帮我们搞定了
具体做法：
在根目录下新建一个名为webpack.config.js文件，把我们想做的按照规范都放进去，一个简单的配置如下：
//_dirname是nodejs的一个全局变量指向当前执行脚本所在目录
modules.exports = {
//webpack的唯一入口文件
entry: _dirname + "/data/main.js",
//打包文件存放的位置以及文件名
output: {
path:_dirname+"/webpack-data",
filename: "main.bundle.js"
}
}
建好了这个文件，我们要打包文件只需要在终端里面运行webpack就可以了，但是我们不会仅满足于此
于是我们就用npm来引导任务执行，对其进行配置后只需要简单的npm start命令来进行打包。在package.json中对npm脚本部分进行相关设置，方法如下：
{
"scripts": {
"start":"webpack" //相当于把npm的start命令指向webpack命令
}
}
注意：package.json的脚本部分已经默认添加了打包启动路径，因此在这里无论是全局或者局部都不需要写详细路径
总结
这是我终端会输出的信息。很多时候我们只要达到目的了，可能也不会再去管其他的了（虽然我也是这样），但是我较劲了一下，就去查了下输出的信息的意思；
| version | time |
|---|---|
| webpack版本 | 打包花费的时间 |
| Asset | Size | Chunks | chunk Names |
|---|---|---|---|
| 打包生成的文件 | 打包花的所花时间 | 打包的分块 | 打包的名称 |
还有一个黄色的警告，很明显，也会让我们不是很爽，那让我们再坚持下，赢得最后的胜利
上面我们可以看到，我的webpack版本是4.27.1.那这个问题就迎刃而解了，百度下，webpack4出现这个警告。百度后发现webpack4引入了模式，有三个状态，开发模式-生产模式-无。我们没有设置模式，这样的话我们就可以去我们的那个packjson里面设置下。
最后简单点，开发模式下代码没有压缩，生产模式下代码压缩了。一直觉得“闻道有先后，术业有专攻，如是而已”，所以在求知路上一直困知勉行，望大佬们指教。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100180.html
摘要：争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。待续相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四 本人微信公众号：前端修炼之路，欢迎关注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用过gulp、grunt，但是一直没有学习过webpack。这两天刚好有时间，学习了下...
摘要：本系列教材将为读者介绍怎么样使用构建一个复杂的项目。本教程分为个小部分，通过这篇文章一步步为你讲解怎么使用构建一个稍微复杂的项目。说明本教程是基于而作，请注意与你自己的版本区别，如果出现不兼容问题请自行升级项目。 文章来源：http://xcoding.tech/tags/Ember-Demo/ 声明：希望本系列教程能帮助更多学习Ember.js的初学者。 本系列教材将为读者介绍怎么样...
摘要：先是基础知识，首先是补了的基础，使用了的入门教程。另外关于，慕课的视频教程讲的也比较清晰，适合入门统统过了一遍之后，开始建立脚手架，正式上马编写。废话不多说了，下面一步一步开始了。安装完成之后，记得设置路径构建项目使用新建一个空白项目。 前言 春节期间，更新了一下自己关于前端的知识体系，要知道对于前端技术，我还是停留在JSP，JQUERY的时代，现在项目里面使用REACT作为前台，所以...
摘要：前言之前在做配置时候多次用到路径相关内容，最近在写项目的时候，有一个文件需要上传到阿里云的功能，同时本地服务器也需要保留一个文件备份。如果返回的路径字符串长度为零，那么他会返回一个，代表当前的文件夹。 showImg(https://segmentfault.com/img/bVbwElJ?w=480&h=204); 前言 之前在做webpack配置时候多次用到路径相关内容，最近在写项...
阅读 3792·2021-11-12 10:34
阅读 2812·2021-09-22 15:14
阅读 777·2019-08-30 15:53
阅读 3195·2019-08-30 12:53
阅读 1279·2019-08-29 18:32
阅读 2761·2019-08-29 16:41
阅读 1056·2019-08-26 13:40
阅读 1795·2019-08-23 18:07
