webpackt入门1:webpack介绍&webpack安装&使用webpack打包
2017-10-17 23:06
811 查看
本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分。
原文地址:入门webpack,看这篇就够了
一、Webpack解决了什么问题
问题1.JavaScript这个脚本化语言在互联网的前端大行其道,但其一直被当作玩具语言,与Java、C#等后端语言相比,除了语法混乱、写法随意之外,无法模块化也是被诟病的一点。CommonJS标准中提出了模块化标准,而模块化标准带来的一个新的问题——项目文件增多,依赖复杂。如果工具能帮助我们自动分析文件的依赖关系,那感情是最好的。
问题2.ECMAScript有很多实现,JavaScript、TypeScript、CoffeeScript等,如果TypeScript这样的语言能转换成JavaScript,这样既能利用TypeScript的语法优点,又能利用JavaScript的场景利用的优势,那感情是最好的。
问题3.同理,Scss、Less这些CSS的预处理器,如果能使用Scss开发,并转换成CSS,那感情是最好的。
问题4.还有很多问题。。。。。。。
Webpack能帮你处理上面这些问题,简而言之:Webpack帮助你分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
二、webpack工作方式
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/d98b8d8ce27f852afab49b971d9142a5.png)
三、webpack安装
1.新建一个文件夹进行测试,如test
2.执行命令
$ npm install webpack -g //全局安装
$ npm install webpack -save-dev //本项目安装
3.查看webpack版本
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/2e9c339086dd81556618ff2890d460d3.png)
四、打包方法1:使用命令行来打包
1.新建文件夹hellopack2
2.初始化项目:在项目的根目录下使用npm init命令,根据提示输入一系列的信息,会生成一个package.json文件
3.生成依赖:在项目的根目录下使用npm install命令,会生成node_modules文件夹,里面是各种依赖的包
4.建立如下的文件结构
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/270ce182950522d8bba2cdc42df65211.png)
5.输入相应的内容
6.命令行打包
项目根目录下执行命令:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/1443ce711d8384f90b3f875f73ce1658.png)
7.浏览器查看index.html
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/9ade8c6b1bac6f3ab9528c2ca0e15c31.png)
命令说明:
(1).webpack在打包的时候需要指定一个入口文件,前面说过了:webpack就是通过这个文件来作为依赖的入口,进而分析整个项目,本示例是main.js。
(2).webpack需要将打包的最终结果输出到一个文件中,这个文件的名称可以自定义,本示例是bundle.js。
五、打包方法2:使用配置文件来打包
如果长期使用$webpack app/main.js pulic/bundle.js来进行打包,不方便且易出错,我们可以将入口文件和输出文件放入配置文件中。
webpack的默认配置文件是webpack.config.js,在项目的根目录下新建这个文件,并放入如下内容:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/9ca88912454b0637ba4ae453eb2b2f24.png)
直接使用命令webpack就可以,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/0e484a70c760c6181212770c6573a348.png)
在浏览器打开index.html同样能看到效果。
六、打包方法3:使用npm的自定义命令来打包
npm可以通过scripts节点来支持自定义命令,我们可以将webpack这个命令放入npm的配置文件package.json,这样以后,我们可以使用自定义的命令来打包了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/83d40fac2244e7adc7ef98abeb05debe.png)
以后输入$npm start就相当于输入了$ webpack。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/d60c6751aad3caa10761071ea23128d9.png)
当然,我们也可以不需要第五点webpack.config.js,可以直接将webpack app/main.js public/bundle.js都放入test的scripts内容中,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/9c688b1bbcf9c23fbf7c3fac6676a9aa.png)
使用同样的命令,也可以达到效果。
参考文档
http://www.jianshu.com/p/42e11515c10f http://webpack.github.io/
原文地址:入门webpack,看这篇就够了
一、Webpack解决了什么问题
问题1.JavaScript这个脚本化语言在互联网的前端大行其道,但其一直被当作玩具语言,与Java、C#等后端语言相比,除了语法混乱、写法随意之外,无法模块化也是被诟病的一点。CommonJS标准中提出了模块化标准,而模块化标准带来的一个新的问题——项目文件增多,依赖复杂。如果工具能帮助我们自动分析文件的依赖关系,那感情是最好的。
问题2.ECMAScript有很多实现,JavaScript、TypeScript、CoffeeScript等,如果TypeScript这样的语言能转换成JavaScript,这样既能利用TypeScript的语法优点,又能利用JavaScript的场景利用的优势,那感情是最好的。
问题3.同理,Scss、Less这些CSS的预处理器,如果能使用Scss开发,并转换成CSS,那感情是最好的。
问题4.还有很多问题。。。。。。。
Webpack能帮你处理上面这些问题,简而言之:Webpack帮助你分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
二、webpack工作方式
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/d98b8d8ce27f852afab49b971d9142a5.png)
三、webpack安装
1.新建一个文件夹进行测试,如test
2.执行命令
$ npm install webpack -g //全局安装
$ npm install webpack -save-dev //本项目安装
3.查看webpack版本
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/2e9c339086dd81556618ff2890d460d3.png)
四、打包方法1:使用命令行来打包
1.新建文件夹hellopack2
2.初始化项目:在项目的根目录下使用npm init命令,根据提示输入一系列的信息,会生成一个package.json文件
3.生成依赖:在项目的根目录下使用npm install命令,会生成node_modules文件夹,里面是各种依赖的包
4.建立如下的文件结构
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/270ce182950522d8bba2cdc42df65211.png)
5.输入相应的内容
//index.html,脚本引用了bundle.js,我们的webpack最终就是要生成这个文件 <!DOCTYPE html> <html> <head> <title>hellowebpack2</title> </head> <body> <div id='root'> </div> <script src="bundle.js"></script> </body> </html>
//main.js var greet=require('./greet') document.querySelector("#root").appendChild(greet()); document.querySelector("#root").append('Hi there and greetings!');
//greet.js module.exports = function(){ var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; };
6.命令行打包
项目根目录下执行命令:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/1443ce711d8384f90b3f875f73ce1658.png)
7.浏览器查看index.html
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/9ade8c6b1bac6f3ab9528c2ca0e15c31.png)
命令说明:
(1).webpack在打包的时候需要指定一个入口文件,前面说过了:webpack就是通过这个文件来作为依赖的入口,进而分析整个项目,本示例是main.js。
(2).webpack需要将打包的最终结果输出到一个文件中,这个文件的名称可以自定义,本示例是bundle.js。
五、打包方法2:使用配置文件来打包
如果长期使用$webpack app/main.js pulic/bundle.js来进行打包,不方便且易出错,我们可以将入口文件和输出文件放入配置文件中。
webpack的默认配置文件是webpack.config.js,在项目的根目录下新建这个文件,并放入如下内容:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/9ca88912454b0637ba4ae453eb2b2f24.png)
直接使用命令webpack就可以,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/0e484a70c760c6181212770c6573a348.png)
在浏览器打开index.html同样能看到效果。
六、打包方法3:使用npm的自定义命令来打包
npm可以通过scripts节点来支持自定义命令,我们可以将webpack这个命令放入npm的配置文件package.json,这样以后,我们可以使用自定义的命令来打包了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/83d40fac2244e7adc7ef98abeb05debe.png)
以后输入$npm start就相当于输入了$ webpack。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/d60c6751aad3caa10761071ea23128d9.png)
当然,我们也可以不需要第五点webpack.config.js,可以直接将webpack app/main.js public/bundle.js都放入test的scripts内容中,如下所示:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/9c688b1bbcf9c23fbf7c3fac6676a9aa.png)
使用同样的命令,也可以达到效果。
参考文档
http://www.jianshu.com/p/42e11515c10f http://webpack.github.io/
相关文章推荐
- 前端自动打包工具webpack的安装和使用
- webpack学习(一):webpack 介绍&安装&常用命令
- webpack 介绍 & 安装 & 常用命令
- webpack 介绍 & 安装 & 常用命令
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
- webpack入门——webpack的安装与使用
- Webpack入门——使用Webpack打包Angular项目的一个例子
- webpack 介绍 & 安装 & 常用命令
- webpack 介绍 & 安装 & 常用命令
- Webpack 入门(一):安装 / 打包 / 命令行
- (笔记)webpack安装、配置、简单的项目打包、插件介绍
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
- webpack 介绍 & 安装 & 常用命令
- Webpack入门——使用Webpack打包Angular项目的一个例子
- webpack 介绍 & 安装 & 常用命令
- Webpack 入门(一):安装 / 打包 / 命令行
- .Net Telerik Web UI 安装和使用入门
- webpack使用babel 6打包react报错
- 使用 React和webpack开发和打包发布
- webpack入门(二)——webpack使用