前端的构建化工具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