前端的构建化工具Webpack

常常看到如jquery-3.0.0.js和jquery-3.0.0-min.js等两类似的文件名。

其实以上两个文件名的内容是同样的，不过带min表明的是占用最小的空间，为项目提升性能。压缩的部分如换行，空格等。

能够看出两文件的体积相差很大。

 

 

 

 

 

因此咱们通常的话项目上线会用到带min的文件，而不带的通常用在开发中，方便学习查看。

同理，本身写的css ,js也是能够打包t提升性能的（html是不能打包的）。

 

实现打包功能的就是构建化工具：Grunt、Gulp、Webpack

一些说明：

1.构建化工具，须要NodeJs 环境支持（安装nodejs)

2.  nodejs 的安装自带npm(node包管理工具)安装（npm：node package manager)

3.使用npm 的命令能够建立工程项目，能够打包项目

 

Webpack：是一个模块打包器(bundler)。

1.在Webpack看来, 前端的全部资源文件(js/json/css/img/less/...)都会做为模块处理

2.它将根据模块的依赖关系进行静态分析，生成对应的静态资源

3.Webpack 自己只能加载JS/JSON模块，若是要加载其余类型的文件(模块)，就须要使用对应的Loader 进行转换/加载，好比 css-loader

4.Loader 自己也是JavaScript 模块,运行在 node.js 环境中，便可以使用npm install 模块名来安装

5.配置文件webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象

6.插件件能够完成一些Loader不能完成的功能。通常是在 webpack 的配置信息 plugins 选项中指定.

        CleanWebpackPlugin: 自动清除指定文件夹资源
        HtmlWebpackPlugin: 自动生成HTML文件并
        UglifyJSPlugin: 压缩js文件

安装webpack

npm install webpack -g //全局安装

npm install webpack --save-dev //局部安装

 

参考资料遇到问题，待续。。。。。

https://my.oschina.net/mdxlcj/blog/1626534

https://my.oschina.net/mdxlcj/blog/1802438