1分钟熟悉webpack

　　随着业务发展和前端人员的增长，搭建一个通用框架以及制定统一规范就成了必然。对于选型这方面，一开始好像就没考虑其余框架，直接选了webpack。webpack的优势就很少说了，可扩展性，强大的npm插件库，说干就干。

　　基于公司基础以及业务限制，一口吃不成个胖子，没办法作成最理想的状态，也就是一份配置文件，npm build能够直接打包全部项目。也许将来会是这个状态，但目前来看，这种一劳永逸的方案并非咱们公司最合适的方案。一方面公司项目机制并不成熟，老项目也很多，直接打包全部项目颇有可能影响老项目;另外一方面打包全部项目权限太大，一我的犯错，可能致使公司全部项目都出问题，因此仍是本身负责本身的项目就好。如今实现的效果也还不错，简简单单3句命令，就实现了本地、测试和线上环境的区分和打包。命令实例以下(项目名称是testDemo)：

　　如今就说下具体的规划吧，想法其实也很简单：

　　一、新建2个同级目录，一个是webpack(项目源目录)，一个是 build(打包以后的项目的目录);

　　二、经过运行不一样的命令(主要是命令最后面的项目名称不同)，将项目从webpack打包到 build 里，而且webpack和build的目录结构如出一辙，好比上面实例中的项目testDemo，它的源目录结构是webpack/app/testDemo，那打包以后的路径就是build/app/testDemo，这样的结构更易于操做和后期维护。

　　先来看看webpack的目录结构吧：

　　说明：

　　·node_modules：安装好的包。

　　·common：公共目录，好比里面能够放公共css、公共插件等。

　　·app、store：项目目录，和 build 内的目录保持一致。

　　·.gitignore：须要忽略的东西，好比 node_modules 等。

　　·package.json：配置文件，若是下载了新的 loader，package.json 文件会有变更。

　　·webpack.common.js：webpack 的公共配置文件。

　　·webpack.dev.js：本地开发配置文件。

　　·webpack.prod.js：线上环境配置文件。

　　·webpack.test.js：测试环境配置文件。

　　·package-lock.json：npm init 过程当中生成的 json 文件，无需关心。

　　那么如今面临的就有如下几个问题了：

　　一、我想要打包哪一个文件就能够打包哪一个文件，而且打包到指定目录，这个是在哪配置的，应该如何配置?

　　二、配置文件里都有入口配置和出口配置，而且若是给对应的 html 对应的加上他想要的主 js 文件，我知道这个确定是动态获取和配置，但具体应该怎么实现?

　　三、css、js、html、img 是怎么处理的，用到了哪些 loader?

　　四、我知道的配置文件只有一个，为何个人会有4个：webpack.common.js、webpack.dev.js、webpack.test.js、webpack.prod.js，为何要写这么多配置文件，以及是怎么实现的?

　　五、打包一次就会生成一个目录和一批文件，并且后缀名还不同，长此以往文件夹岂不是愈来愈大，怎么解决这个问题，原理又是什么?

　　六、不管你有没有修改文件，只要打包一次，webpack 就会从新运行一遍，而且生成不一样的文件名，有没有什么办法避免这种状况，至少未修改的文件就不会再被打包一遍?

　　七、如何提取公共模块?好比 index1.js 和 index2.js 都引用了 jQuery，有没有什么办法，可让打包后的 jQuery 只有一份?

　　八、本地环境我并不想压缩代码，由于压缩会很慢，测试和线上环境才会去压缩，这个该怎么实现，须要用什么 loader?

　　九、打包以后的 css 我并不像被压缩在 js 一块，想单独放一个 css 文件夹里，这个能够实现吗，怎么去实现?

　　十、css 是怎么实现的压缩，和 js 压缩同样吗，须要注意什么?

　　十一、如何给静态资源配置域名地址，而本地不须要，这个怎么实现?

　　十二、package.json 里的 devDependencies 和dependencies 有什么区别，须要注意什么?

　　1三、.gitignore 的做用，以及如何配置?

　　下面一一来解答：

　　一、想要打包哪一个文件就能够打包哪一个文件，也就是上面提到的 npm start app/testDemo，运行这个命令，就会打包 webpack 下 app/testDemo 这个目录，想要实现这个，只需配置package.json和 webpack.common.js 便可：

　　package.json(不懂的能够去了解下scripts)

　　webpack.common.js

　　这样就实现了想要打包哪一个文件就能够打包哪一个文件，至于打包到哪一个文件，就须要本身手动写一些配置了。

　　主要配置好 output 便可：

　　二、单页面文件比较简单，好比 index.html ,须要引入 index.js 打包后生成的 js 文件，直接 script 标签引入便可，但手动的方法不方便且易出错，怎么实现 index.html 自动引入 index.js 打包后的文件呢?这时候须要用到一个 loader，即：html-webpack-plugin，具体实现方法也很简单：

　　可是若是出现多页面，而且有不少不少项目，不可能每一个项目都这样一步一步去配置，这时候就须要动态获取 entry、动态加载HtmlWebpackPlugin。

　　不过动态加载是有要求和前提的，对文件目录结构以及命名有必定的要求的规范，不是你想怎么写均可以打包成功。

　　我这里的规范以 testDemo 为例：

　　

　　·项目的目录结构和 testDemo保持一致：html文件在最外层，js、css、json、img单独文件夹。

　　·js 目录纯粹化：因为webpack.common.js 里是动态获取 entry和动态加载 HtmlWebpackPlugin，因此 js 文件夹下的文件都会加进去而且被相应的 html 引用，因此不须要加进去的 js 文件必定不要放在 js 文件夹下面，能够新建一个文件夹去放，好比 common/meta.js。

　　·html 和 js 的文件名保持一致：html 文件须要引入的入口js 文件名必须和html 的文件名必须保持一致，好比 index.html 对应的 js 就是 index.js，edit.html 对应的 js 就是 edit.js，这样配置文件才会知道哪一个 html 文件须要加载什么 js 文件。

　　三、css、js、html、img 要用到哪些 loader，用过webpack 的其实都应该比较熟练了，我就直接贴代码吧。

　　须要稍微注意一点的是处理图片的 loader 以及图片的引用方式。

　　url-loader中的 limit = 1，表明大小小于 1kb的图片地址会被转化成 base64 的 url;html-loader 是为了处理 html 中的图片地址;js 中的图片须要经过 require 方式进行引用，直接引用无效。

　　(1)HTML

　　(2)CSS

　　(3)JS

　　四、配置文件文件分为这4个，实际上是为了更好的区分环境(本地、测试、线上)以及维护配置代码。

　　·webpack.common.js 是公共配置文件，里面是本地、测试和线上都须要的配置，包括动态入口和出口、处理html、css、js、图片等须要的 loader、提取公共文件、配置别名等;

　　·webpack.dev.js 是本地环境配置文件，里面只须要配置 publicPath、监听代码变化自动提交并刷新网页便可;

　　·webpack.test.js 是测试环境配置文件，里面也须要配置publicPath，但测试环境的publicPath 和本地的publicPath 不同，咱们约定的是测试环境的域名和路径，测试环境也须要加上清除文件夹的操做，防止每次 webpack 致使文件过大，还有压缩文件的操做，包括 js 和 css 的压缩，同时也会配置 test 的环境变量;

　　·webpack.prod.js 就是线上环境配置文件，它和测试环境的配置文件几乎如出一辙，惟独publicPath 是线上环境的域名和路径。

　　而 npm start app/testDemo、npm test app/testDemo、npm run build app/testDemo 就是根据环境不一样，执行不一样的配置文件来达到不一样的效果。

　　具体的实现到时候直接贴代码，不一样环境的配置文件如何引用公共配置文件能够稍微说一下，主要经过 webpack-merge 。

　　好比以下是 webpack.dev.js：

　　五、为了解决文件愈来愈大的问题，只须要每次在打包以前，将原来目录里的文件清除掉便可。

　　六、为了不未修改的文件被打包，webpack 自己自带一个插件去处理：

　　七、提取公共模块，webpack 也自带了一个插件去处理：

　　八、本地不须要压缩，测试和线上环境才去压缩，以前的环境划分就派上了很好的用场了，只须要在 webpack.test.js 和 webpack.prod.js 中配置压缩便可。至于用到什么 loader，js 通常用的是uglifyjs-webpack-plugin，css 用的是optimize-css-assets-webpack-plugin。配置以下：

　　uglify里面的配置可不写，我这里主要写的是ie8 的兼容，sourceMap 也可设置为 true，这样利于调试。

　　optimize-css-assets-webpack-plugin能使 css 最小化，若是不作处理的话，压缩后会致使一些兼容的前缀丢失，因此里面添加了一些配置，方式压缩过狠。

　　九、若是不作任何处理的话，打包后的 css 会被压缩在 js 之中，第一不太美观，第二会致使 js 文件过大，因此有必要将 css 分离出来，这时候要用到一个extract-text-webpack-plugin 的插件。配置以下：

　　十、前面已经说过了，css 压缩采用optimize-css-assets-webpack-plugin插件，js 压缩采用的是 uglify，要注意的就是若是不作任何配置，css 里有些作兼容的前缀，好比 -webkit- 等就会被看成没用的东西被压缩掉，再加一些配置就能够了。

　　十一、给静态资源配置不一样的地址，不管是本地仍是测试仍是线上，都是经过 publicPath 进行实现的。

　　本地：

　　测试(前半部分代码和本地保持一致)：

　　线上(前半部分代码和本地保持一致)：

　　十二、之前一直在纠结一个npm安装的包依赖管理的问题。是这样的：咱们在使用 npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，他们是：--save-dev 或 --save。

　　首先须要说明的是Dependencies一词的中文意思是依赖和附属的意思，而dev则是 develop(开发)的简写。

　　因此它们的区别在 package.json 文件里面体现出来的就是，使用 --save-dev 安装的 插件，被写入到 devDependencies 域里面去，而使用--save 安装的插件，则是被写入到 dependencies 区块里面去。

　　那 package.json 文件里面的devDependencies 和dependencies 对象有什么区别呢?

　　devDependencies 里面的插件只用于开发环境，不用于生产环境，而dependencies 是须要发布到生产环境的。

　　好比咱们写一个项目要依赖于jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies;

　　而咱们使用的一些构建工具好比glup、webpack这些只是在开发中使用的包，上线之后就和他们不要紧了，因此将它写入devDependencies。

　　1三、.gitignore 就是将不想上传的文件或文件夹上传到仓库里，好比 npm install 生成的巨大无比的 node_modules。使用方法参考：https://git-scm.com/docs/giti...

　　差很少就介绍到这吧，下面直接把代码贴出来，能够直接把 package.json 引到本身的文件中，而后 npm install直接安装相关依赖。固然也能够本身 npm init 后一个一个下载安装，本身喜欢就好。

　　补充一些相关命令：

　　·安装淘宝镜像：

　　·删除 node_modules ：

　　·安装loader(好比安装html-loader 和 vue)：

　　package.json

　　webpack.common.js

　　webpack.dev.js

　　webpack.test.js

　　webpack.prod.js