何为webpack

简单来说，webpack是实现 js 能够在浏览器模块化的一个前端打包工具。（来自官网-->）本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle。

对webpack不是很熟悉，一直想找个机会好好的学一学。但是看了官网，感觉不知道从哪里下手。找到了阮老师的教程，先撸一次看看。

所有内容来自阮老师，原文请移步 GitHub - ruanyf/webpack-demos: a collection of simple demos of Webpack

1.demo1 单入口打包

主要是单入口文件的打包，需要先配置 webpack.config.js文件。内容和commonjs的写法一致。module.exports = {entry:'./main.js',output:{filename:'bundle.js'}};这里可以加个路径。当然了，需要引入 path 。path.resolve() - path.resolve 方法用于将相对路径转为绝对路径。不过刚开始就不需要去书写

2.demo2 多入口打包

主要是多入口的打包。webpack.config.js文件中配置如下。

entry是一个对象。打包出来的文件个数和入口个数保持一致。名称为 entry 的key值，即 bundle1.js，bundle2.js。filename写法为固定写法。

3.demo3 babel-loader jsx/es6转化loader

loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。(同样来自官网)说白了就是类似一个转化器，有些文件或者语法浏览器不识别，需要用loader转化！这里注意，只能转化语法，但是想promise，async，await 等es6，es7的对象，需要加垫片处理。安装 babel-polyfill 安装包，在使用 es6或es7的js中，import 'babel-polyfill'，在webpack配置文件 webpack.config.js中，entry 写法为 entry: ["babel-polyfill", "./src/source-map.js"]。转化出来的就是 es5 的写法。更多请移步 webpack基础探讨 - 腾讯Web前端 IMWeb 团队社区 | blog | 团队博客

babel-loader将JSX/es6转化成浏览器可以识别的文件和语法。

这里我们转化的是jsx语法。使用过react的，都知道jsx的哈。webpack.config.js中内容如下

新增 module属性，值为一个对象。rules为转化的总规则，数组中每一个对象就是一个处理规则。现在我们是处理jsx语法，test的值为正则，既然是jsx，那么就是jsx文件的后缀了。exclude是忽略该目录下。use是使用的loader，这里我们使用babel-loader。options 属性为字符串或对象。值可以传递到 loader 中，将其理解为 loader 选项。由于兼容性原因，也可能有 query 属性，它是 options 属性的别名。使用 options 属性替代。

这里的es2015是转化 es6语法的，现在的应该是 babel-preset-env。

4.demo04 css-loader 在js中使用css

好气啊，一般我们使用css都是在html中，但是你想在js中使用怎么办。webpack就允许你这样做。在js文件中使用 require引入js文件。

webpack使用css-loader帮你构建。打包在一个js中。webpack.config.js中如下。需要你执行这个命令，安装这两个依赖。 npm install style-loader css-loader -D。同理，rules是一个转化规则，既然新增了css处理规则，在rules中添加一个对象就好。

5.demo05 url-loader js中引入图片

既然能够引入css，那么图片也是可以的了。需要事先安装 url-loader。limit限制图片大小，单位 bytes。如果图片大小小于这个，会被转化为base64值。游泳健身base64了解一下？如果大于就不会转化，会将路径模糊化。

引入的图片

base64和路径变化

6.demo06 css局部作用域略

7.demo07 UglifyJs Plugin 这里我翻译成压缩插件吧，目的就是将代码压缩

webpack允许你使用插件扩展它的功能，这里的 UglifyJs plugin插件用来缩小js代码，是js文件大小变小。同样的，这里引入的无论是loader还是拆件，都要事先安装其依赖包。这里我们安装的是 uglifyjs-webpack-plugin。写法如下，plugins作用如其名，就是一个插件列表。

main.js

webpack配置

8.demo08 HTML Webpack Plugin and Open Browser Webpack Plugin

HTML webpack Plugin 用来帮你书写index.html（有了这个插件，你就不需要写index.html文件了）。而Open Browser webpack Plugin 用来执行webpack打包后帮你打开浏览器。同样的，引入并书写。plugins插件列表中，插件的配置需要写在插件的括号内，一个配置对象。具体插件的配置对象，可以查找webpack官网的配置。

HTML webpack Plugin 有默认的帮你配置的模板，如果不满足需要。可手动配置模板。可以进行内容的书写。显示出来的界面title就 Custom template。具体可看文档GitHub - jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

9.demo09 Environment flags 环境标志 DefinePlugin

DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。具体可到DefinePlugin 查看。(就是说有些逻辑在dev下，有些逻辑在生产环境中。可以用这个来进行配置，区别)new webpack.DefinePlugin中的配置对象的value值，可以是常量，也可以是外部配置的值。这里是定义了一个DEBUG变量来。在进行webpack打包时，给DEBUG值赋值。另外在自己打包时，不想让打包出来的代码被压缩。可以在webpack.config.js中的exports中添加一个属性。见下图