第01节：认识WebPack的作用
现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包，还需要解决SCSS，Less……新增样式的扩展写法的编译工作。所以现代化的前端已经完全依赖于WebPack的辅助了。
现在最流行的三个前端框架，可以说和webpack已经紧密相连，框架官方都推出了和自身框架依赖的webpack构建工具。
React.js+WebPack
Vue.js+WebPack
AngluarJS+WebPack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
这段话有三个重点：
打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。
了解一下WebPack的作用:
WebPack的安装，采用的是命令行npm形式的安装。
具体安装方法：
用win+R打开运行对话框，输入cmd进入命令行模式。然后找到你想开始项目的地方，输入下方代码：
1 2 | mkdir webpack_demo cd webpack_demo |
1 2 | //全局安装 npm install -g webpack |
注意：全局安装是可以的，但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
对项目目录进行安装
初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。
在命令行输入：
1 | npm init |
输入完成后，npm终端会问你关于项目的名称，描述……一堆内容，如果你不考虑发布到npm上，这些内容都不重要，而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。
输入下面命令进行项目目录的安装：
1 | npm install --save-dev webpack |
这里的参数–save是要保存到package.json中，dev是在开发时使用这个包，而生产环境中不使用。
开发环境and生产环境：
开发环境：在开发时需要的环境，这里指在开发时需要依赖的包。
生产环境：程序开发完成，开始运行后的环境，这里指要使项目运行，所需要的依赖包。
1 | webpack -v |
在项目根目录建立两个文件夹，分别是src文件夹和dist文件夹：
src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
你可以理解成src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境。
在dist文件下手动建立一个index.html文件，并写入下面的代码。
/dist/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jspang webpack</title> </head> <body> <div id="title"></div> <script src="./bundle.js"></script> </body> </html> |
这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件。我们的index.html写好后，接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。
src/entery.js
1 | document.getElementById('title').innerHTML='Hello Webpack'; |
这个文件的代码很简单，就是在<div id=”title”></div>标签里写入Hello Webpack这句话。
Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：
1 | webpack {entry file} {destination for bundled file} |
{entry file}:入口文件的路径，本文中就是src/entery.js的路径；
{destination for bundled file}:填写打包后存放的路径。
注意：在命令行中是不需要写{ }的。
在我写的例子中，终端执行命令如下：
1 | webpack src/entry.js dist/bundle.js |
执行的结果如下图：
命令执行成功后，会在dist目录下出现bundle.js文件，这时我们就可以在浏览器中预览结果了，网页中显示出了Hello Webpack的信息。
总结：
从这个Demo中你会了解到webpack的基本用法和使用过程，并会了命令行打包的方法。
webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版。
webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 | module.exports={ //入口文件的配置项 entry:{}, //出口文件的配置项 output:{}, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} } |
entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
module：配置模块，主要是解析CSS和图片转换压缩等功能。
plugins：配置插件，根据你的需要配置不同功能的插件。
devServer：配置开发服务功能，后期我们会详细讲解。
这个选项就是配置我们要压缩的文件一般是JavaScript文件（当然也可以是CSS…..），这里要填写的是src目录下的entery.js文件。
wepback.config.js中的entry选项
1 2 3 4 5 | //入口文件的配置项 entry:{ //里面的entery是可以随便写的 entry:'./src/entry.js' }, |
出口配置是用来告诉webpack最后打包文件的地址和文件名称的。应该打包到dist目录下。
1 2 3 4 5 6 7 8 | //出口文件的配置项 output:{ //打包的路径文职 path:path.resolve(__dirname,'dist'), //打包的文件名称 filename:'bundle.js'
}, |
如果你只这样写，是会报错的：找不到path这个东西。所以我们要在webpack.config.js的头部引入path，代码如下：
1 | const path = require('path'); |
其实path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。
filename:是打包后的文件名称，这里我们起名为bundle.js。
现在webpack.config.js的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | const path = require('path'); module.exports={ //入口文件的配置项 entry:{ entry:'./src/entry.js' }, //出口文件的配置项 output:{ //输出的路径，用了Node语法 path:path.resolve(__dirname,'dist'), //输出的文件名称 filename:'bundle.js' }, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} } |
这个代码写完后，可以在终端中直接输入webpack就会进行打包。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | const path = require('path'); module.exports={ //入口文件的配置项 entry:{ entry:'./src/entry.js', //这里我们又引入了一个入口文件 entry2:'./src/entry2.js' }, //出口文件的配置项 output:{ //输出的路径，用了Node语法 path:path.resolve(__dirname,'dist'), //输出的文件名称 filename:'[name].js' }, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} } |
可以看到代码的第7和14行进行了增加和修改，在入口文件配置中，增加了一个entry2.js的入口文件（这个文件你需要自己手动建立），这时候要打包的就有了两个入口文件。在代码14行我们把原来的bundle.js修改成了[name].js。
[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
要执行webpack-dev-server是要先用npm install webpack-dev-server –save-dev 来进行下载的。下载好后，需要配置一下devServer。最简单的devServer配置项只有四个。
/webpack.config.js
1 2 3 4 5 6 7 8 9 10 | devServer:{ //设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), //服务器的IP地址，可以使用IP也可以使用localhost host:'localhost', //服务端压缩是否开启 compress:true, //配置服务端口号 port:1717 } |
contentBase:配置服务器基本运行路径，用于找到程序打包地址。
host：服务运行地址，建议使用本机IP，这里为了讲解方便，所以用localhost。
compress：服务器端压缩选型，一般设置为开启，如果你对服务器压缩感兴趣，可以自行学习。
port：服务运行端口，建议不使用80，很容易被占用，这里使用了1717.
注意：这里需要使用npm 来进行安装webpack-dev-server了， 命令如下：
1 | npm install webpack-dev-server --save-dev |
这是本地安装，所以使用了–save-dev。
配置好后，你可以试着在终端中输入webpack-dev-server,如果可以执行成功，但是往往提示下面的错误（或者是无法找到内部或外部命令）。
出现下面的错误不用慌张，我们只要在package.json里配置一下scripts选项就可以执行了。
/package.json
1 2 3 | "scripts": { "server":"webpack-dev-server" }, |
配置好保存后，在终端里输入 npm run server 打开服务器。然后在浏览器地址栏输入http://localhost:1717就可以看到结果了。
在npm run server 启动后，它是有一种监控机制的（也叫watch）。它可以监控到我们修改源码，并立即在浏览器里给我们更新。
注意：这里只是我们的webpack3.6版本支持，在3.5版本时要支持热更新还需要一些其他的操作。因为已经有了成熟的3.6版本，我就不再介绍低版本的操作方法。还有一种情况。如果你都设置好了，但是不进行热更新，可能是你系统的问题，在Linux和Ma上支持良好，在Windows上有时会出现问题。
Webpack在生产环境中有一个重要的作用就是减少http的请求数，就是把多个文件打包到一个js里，这样请求数就可以减少好多。这节课我们就学习一个重要的知识，把我们的CSS文件打包。在学习CSS打包之前，需要先对webpack.config.js里的Loaders配置项进行了解。
Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通过使用不同的Loader，Webpack可以的脚本和工具，从而对不同的文件格式进行特定处理。
简单的举几个Loaders使用例子：
可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
可以把React中的JSX转换成JavaScript代码。
注意：所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。下面我们对Loaders的配置型简单梳理一下。
test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）。
建立index.css文件
要打包CSS你必须先要有个CSS文件，在/src目录下，我们建立一个css文件夹，在文件夹里建立index.css文件。代码内容如下。
./src/css/index.css
1 2 3 4 | body{ background-color: red; color: white; } |
CSS文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。
/src/entery.js中在首行加入代码：
1 | import css from './css/index.css'; |
CSS和引入做好后，我们就需要使用loader来解析CSS文件了，这里我们需要两个解析用的loader，分别是style-loader和css-loader。
style-loader:
它是用来处理css文件中的url()等，npm中的网址：https://www.npmjs.com/package/style-loader
用npm install 进行项目安装：
1 | npm install style-loader --save-dev |
css-loader：
它是用来将css插入到页面的style标签。npm中的网址：https://www.npmjs.com/package/css-loader
用npm install 进行项目安装：
1 | npm install --save-dev css-loader |
两个loader都下载安装好后，我们就可以配置我们loaders了。
loaders配置：
修改webpack.config.js中module属性中的配置代码如下：
webpack.config.js
1 2 3 4 5 6 7 8 | module:{ rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, |
第一种写法：直接用use。
1 2 3 4 5 6 7 8 | module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] }, |
第二种写法：把use换成loader。
1 2 3 4 5 6 7 8 | module:{ rules:[ { test:/\.css$/, loader:['style-loader','css-loader'] } ] }, |
第三种写法：用use+loader的写法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | module:{ rules:[ { test:/\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] } ] }, |
由此看出，webpack的扩展和灵活性是非常强的，习惯于那种写法都可以。
在Webpack中可以很轻松的实现JS代码的压缩，它是通过插件的方式实现的，引入一个uglifyjs-webpack-plugin(JS压缩插件，简称uglify)。
注意：虽然uglifyjs是插件，但是webpack版本里默认已经集成，不需要再次安装。
引入：
我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件
1 | const uglify = require('uglifyjs-webpack-plugin'); |
引入后在plugins配置里new一个 uglify对象就可以了，代码如下。
1 2 3 | plugins:[ new uglify() ], |
如果用的VSCode的话，可以按Alt+Z让他文件自动换行，查看效果。
webpack.config.js的全部代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | const path=require('path'); const uglify = require('uglifyjs-webpack-plugin'); module.exports={ entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, output:{ path:path.resolve(__dirname,'dist'), filename:'[name].js' }, module:{ rules:[ { test:/\.css$/, use: ["style-loader", "css-loader"] } ] }, plugins:[ new uglify() ], devServer:{ contentBase:path.resolve(__dirname,'dist'), host:'192.168.0.104', compress:true, port:1717 } } |
把dist中的html文件剪切到src目录中，并去掉我们的JS引入代码（webpack会自动为我们引入JS），因为这才是真实工作的目录文件结构。
然后我们配置webpack.config.js文件，先引入我们的html-webpack-plugin插件。
1 | const htmlPlugin= require('html-webpack-plugin'); |
引入后使用npm进行安装包。
1 | npm install --save-dev html-webpack-plugin |
最后在webpack.config.js里的plugins里进行插件配置，配置代码如下。
1 2 3 4 5 6 7 8 | new htmlPlugin({ minify:{ removeAttributeQuotes:true }, hash:true, template:'./src/index.html'
}) |
minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
template：是要打包的html模版路径和文件名称。
上边的都配置完成后，我们就可以在终端中使用webpack，进行打包。你会看到index.html文件已经被打包到我们的dist目录下了，并且自动为我们引入了路口的JS文件。
找到图片后在src目录下新建一个images文件夹，把图片放入images文件夹。
在index.html文件中增加一个放置div的标签（需要注意的是这里修改的是src下的index.html文件，不是dist下的），代码如下。
1 | <div id="tupian"></div> |
编写css文件，把你用的图片作为背景显示。
1 2 3 4 5 | #tupian{ background-image: url(../images/manhua.png); width:466px; height:453px; } |
编写完成后，我们可以试着用webpack去打包一下。你会发现终端中是报错的，具体错误可以看下图。
上面的错误是由于缺少loader的解析。安装两个解析图片用的loader。
安装file-loader和url-loader
1 | npm install --save-dev file-loader url-loader |
安装好后我们需要对两个loader进行基本的了解。
file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
配置url-loader
我们安装好后，就可以使用这个loader了，记得在loader使用时不需要用require引入，在plugins才需要使用require引入。
webpack.config.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //模块：例如解读CSS,图片如何转换，压缩 module:{ rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },{ test:/\.(png|jpg|gif)/ , use:[{ loader:'url-loader', options:{ limit:500000 } }] } ] }, |
test:/\.(png|jpg|gif)/是匹配图片文件后缀名称。
use：是指定使用的loader和loader的配置参数。
limit：是把小于500000B的文件打成Base64的格式，写入JS。
没有在webpack.config.js中使用file-loader，但是依然打包成功了。需要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。url-loader工作分两种情况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。
也就是说，其实我们只安装一个url-loader就可以了。但是为了以后的操作方便，顺便安装上file-loader。
有些简单的交互页面中，你的JavasScript页面代码会非常少，而大部分代码都在CSS中，这时候项目组长会要求把CSS单独提取出来，方便以后更改。遇到这个需求你不要惊慌，已经有大神为我们准备好了对象的插件（plugin）。
extract-text-webpack-plugin
这个插件就可以完美的解决我们提取CSS的需求，但是webpack官方其实并不建议这样作，他们认为CSS就应该打包到JavasScript当中以减少http的请求数。但现实中的需求往往不是我们前端能控制的，有些需求是我们不能控制的，分离CSS就是这样一个既合理由不合理的需求。
1 | npm install --save-dev extract-text-webpack-plugin |
引入：安装完成后，需要先用require引入。
1 | const extractTextPlugin = require("extract-text-webpack-plugin"); |
设置Plugins：引入成功后需要在plugins属性中进行配置。这里只要new一下这个对象就可以了。
1 | new extractTextPlugin("/css/index.css") |
这里的/css/index.css是分离后的路径位置。这部配置完成后，包装代码：还要修改原来我们的style-loader和css-loader。
修改代码如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | module:{ rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ test:/\.(png|jpg|gif)/ , use:[{ loader:'url-loader', options:{ limit:500000 } }] } ] }, |
完成上边这四部后，就可以使用webpack进行打包了。
利用extract-text-webpack-plugin插件很轻松的就把CSS文件分离了出来，但是CSS路径并不正确，最好的解决方案是使用publicPath解决。
publicPath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的。
在处理前，我们在webpack.config.js 上方声明一个对象，叫website。
1 2 3 | var website ={ publicPath:"http://192.168.1.108:1717/" } |
注意，这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。
然后在output选项中引用这个对象的publicPath属性。
1 2 3 4 5 6 7 8 | //出口文件的配置项 output:{ //输出的路径，用了Node语法 path:path.resolve(__dirname,'dist'), //输出的文件名称 filename:'[name].js', publicPath:website.publicPath }, |
配置完成后，你再使用webpack命令进行打包，你会发现原来的相对路径改为了绝对路径，这样来讲速度更快。
在webpack中是不喜欢你使用标签<img>来引入图片的，但是我们作前端的人特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他可以很好的处理我们在html 中引入图片的问题。
这时候需要配置package.json里的scripts选项，加一个build命令进行打包项目使用。
1 2 3 4 | "scripts": { "server": "webpack-dev-server --open", "build":"webpack" }, |
配置完成后，可以在控制台输入npm run build 进行打包。
前面打包后的图片并没有放到images文件夹下，要放到images文件夹下，其实只需要配置我们的url-loader选项就可以了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | module:{ rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ test:/\.(png|jpg|gif)/ , use:[{ loader:'url-loader', options:{ limit:5000, outputPath:'images/', } }] } ] }, |
这回你再执行打包就可以把图片打包到images文件夹里了。
解决的问题就是在hmtl文件中引入<img>标签的问题。
安装：
1 | npm install html-withimg-loader --save |
配置loader
webpack.config.js
1 2 3 4 | { test: /\.(htm|html)$/i, use:[ 'html-withimg-loader'] } |
然后在终端中可以进行打包了。你会发现images被很好的打包了。并且路径也完全正确。题。
第05节中已经讲过CSS文件的打包，后来又讲了CSS分离。这节我们讲解一下Less文件如何打包和分离。Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。也就是说Less给我们枯燥单一的样式文件加入了编程机制，这让我们这些前端程序员很受用，所以在工作中大部分程序员都使用了Less开发。
安装:
要使用Less，我们要首先安装Less的服务，当然也是用npm来进行安装。
1 | npm install --save-dev less |
还需要安装Less-loader用来打包使用。
1 | npm install --save-dev less-loader |
写loader配置：
安装好后，需要在webpack.config.js里编写loader配置，当然要想正确解析成CSS，还是需要style-loader和css-loader的帮助。
webpack.config.js
1 2 3 4 5 6 7 8 9 10 | { test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS , { loader: "less-loader" // compiles Less to CSS }] } |
编写一个less文件
现在webpack的配置好了，我们还需要编写一个less文件，这里明文为black.less.里边只做一件是就是把一个层的背景设置成黑色。
black.less
1 2 3 4 5 6 | @base :#000; #gogo{ width:300px; height:300px; background-color:@base; } |
这里#gogo是层的ID名称。@base是我们设置的变量名称。
引入到我们entery.js文件中
1 | import less from './css/black.less'; |
之前extract-text-webpack-plugin这个插件，想把Less文件分离出来的方法跟这个几乎一样
1 2 3 4 5 6 7 8 9 10 11 12 | { test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], // use style-loader in development fallback: "style-loader" }) } |
配置好后，less被分离到了index.css文件里。
这里需要 在项目目录下用npm安装两个包。node-sass和sass-loader
node-sass：因为sass-loader依赖于node-sass，所以需要先安装node-sass
1 | npm install --save-dev node-sass |
sass-loader:
1 | npm install --save-dev sass-loader |
注意：在用npm安装时，这个loader很容易安装失败，最好使用cnpm来进行安装。如果你安装一直报错，最好是把node_modules文件夹删除后，再重新安装。
1 2 3 4 5 6 7 8 9 10 | { test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] } |
需要注意的是loader的加载要有先后顺序。
1 2 3 4 5 6 7 | $nav-color: #FFF; #nav { $width: 100%; width: $width; height:30px; background-color: $nav-color; } |
都完成后，启动npm run server 来查看效果了。
1 2 3 4 5 6 7 8 9 10 11 12 | { test: /\.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" }], // use style-loader in development fallback: "style-loader" }) } |
我们先来看一下代码：
1 2 | -webkit-transform: rotate(45deg); transform: rotate(45deg); |
为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。
PostCSS
PostCSS是一个CSS的处理平台，它可以帮助你的CSS实现更多的功能，通过其中的一个加前缀的功能，初步了解一下PostCSS。
需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）
1 | npm install --save-dev postcss-loader autoprefixer |
postCSS推荐在项目根目录（和webpack.config.js同级），建立一个postcss.config.js文件。
postcss.config.js
1 2 3 4 5 | module.exports = { plugins: [ require('autoprefixer') ] } |
这就是对postCSS一个简单的配置，引入了autoprefixer插件。让postCSS拥有添加前缀的能力，它会根据 can i use 来增加相应的css3属性前缀。
对postcss.config.js配置完成后，还需要编写loader配置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } }, { loader: "postcss-loader" } ] } |
配置提取CSS的loader配置.
1 2 3 4 5 6 7 8 9 10 11 | { test: /\.css$/, use: extractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] })
} |
总结:postcss还有很多功能。这里给出postcss-loader的github地址：https://github.com/postcss/postcss-loader
PurifyCSS
使用PurifyCSS可以大大减少CSS冗余，比如经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。
从名字你就可以看出这是一个插件，而不是loader。所以这个需要安装还需要引入。 PurifyCSS-webpack要以来于purify-css这个包，所以这两个都需要安装。
1 | npm i -D purifycss-webpack purify-css |
这里的-D代表的是–save-dev ,只是一个简写。
引入glob
因为需要同步检查html模板，所以需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。
1 | const glob = require('glob'); |
引入purifycss-webpack
同样在webpack.config.js文件头部引入purifycss-webpack
1 | const PurifyCSSPlugin = require("purifycss-webpack"); |
配置plugins
引入完成后需要在webpack.config.js里配置plugins。代码如下，重点看标黄部分。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | plugins:[ //new uglify() new htmlPlugin({ minify:{ removeAttrubuteQuotes:true }, hash:true, template:'./src/index.html'
}), new extractTextPlugin("css/index.css"), new PurifyCSSPlugin({ // Give paths to parse for rules. These should be absolute! paths: glob.sync(path.join(__dirname, 'src/*.html')), })
] |
这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
注意：使用这个插件必须配合extract-text-webpack-plugin这个插件,配置好上边的代码，可以故意在css文件里写一些用不到的属性，然后用webpack打包，没用的CSS已经自动给你删除掉了。在工作中记得一定要配置这个plugins，因为这决定你代码的质量，非常有用。
Babel是什么？
Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过便宜帮你达到以下目的：
使用下一代的javaScript代码(ES6,ES7….)，即使这些标准目前并未被当前的浏览器完全支持。
使用基于JavaScript进行了扩展的语言，比如React的JSX。
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个需要的功能或拓展，都需要安装单独的包（用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
先一次性安装这些依赖包
1 | cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react |
在webpack中配置Babel的方法如下：
1 2 3 4 5 6 7 8 9 10 11 12 | { test:/\.(jsx|js)$/, use:{ loader:'babel-loader', options:{ presets:[ "es2015","react" ] } }, exclude:/node_modules/ } |
现在已经可以用webapck转换ES6的语法兼容各个浏览器了，可以修改一下entry.js的代码如下：
1 2 3 4 5 | import css from './css/index.css'; { let jspangString = 'Hello Webpack' document.getElementById('title').innerHTML=jspangString; } |
上面的代码使用了ES6的let声明方法。如果你不使用Babel来进行转换，你会发现打包出来的js代码没有作兼容处理，使用了Babel转换的代码是进行处理过的。
虽然Babel可以直接在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，如果卸载webapck.config.js中会非常的雍长不可阅读，所以经常把配置卸载.babelrc文件里。
在项目根目录新建.babelrc文件，并把配置写到文件里。
.babelrc
1 2 3 | { "presets":["react","es2015"] } |
.webpack.config.js里的loader配置
1 2 3 4 5 6 7 | { test:/\.(jsx|js)$/, use:{ loader:'babel-loader', }, exclude:/node_modules/ } |
现在网络上已经不流行babel-preset-es2015，现在官方推荐使用的是babel-preset-env,那我们为了紧跟潮流，我们在讲一下env的配置方法。
首先需要下载：
1 | npm install --save-devv babel-preset-env |
然后修改.babelrc里的配置文件。其实只要把之前的es2015换成env就可以了。
1 2 3 | { "presets":["react","env"] } |
总结：在实际工作中还是要安装Babel的，这样能更好的兼容每种浏览器，而把Babel的配置文件分解出来是最好的选择。
作为一个程序员每天的大部分工作就是调试自己写的程序，使用了webpack后，所以代码都打包到了一起，给调试带来了麻烦，但是webpack已经充分考虑好了这点，它支持生产Source Maps来方便的调试。
在使用webpack时只要通过简单的devtool配置，webapck就会自动给生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让调试起来更简单。
四种选项
在配置devtool时，webpack给我们提供了四种选项。
source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。
四种打包模式，有上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对执行和调试有一定的影响。
个人意见是，如果大型项目可以使用source-map，如果是中小型项目使用eval-source-map就完全可以应对，需要强调说明的是，source map只适用于开发阶段，上线前记得修改这些调试设置。
简单的配置：
1 2 3 4 5 6 7 8 9 10 | module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } }
//作者：zhangwang |
总结：调试在开发中也是必不可少的，但是一定要记得在上线前一定要修改webpack配置，在打出上线包。
一个项目中是有开发环境和生产环境的，这两个环境的依赖也是不同的。
开发依赖：只在开发中用来帮助你进行开发，简化代码或者生成兼容设置的以来包。你可以打开package.json来查看，devDependencies的下面的这些包为开发使用的包。这些包在生产环境中并没有用处。
生产依赖：就是比如我们的js使用了jquery，jquery的程序要在浏览器端起作用，也就是说我们最终的程序也需要这个包，这就是生产依赖。这些包在dependencies中。
要在项目中使用jquery库，这时候一般有三种安装方法。
第一种：
1 | npm install jquery |
安装完成后，你会发现在package.json中并不存在这个包的依赖。如果你项目拷贝给别人继续开发，或者别人和你git合作，再次下载项目npm install时就会缺少这个jquery包。项目就会无法正常运行，所以这也是我们最不赞成的安装方法。
第二种：
1 | npm install jquery --save |
安装完成后，它存在于package.json的dependencies中，也就是说它是生产环境需要依赖的包（上线时需要的以来包）。
第三种：
1 | npm install jquery --save-dev |
安装完成后，它存在于package.json的devDependencies中，也就是说它是开发环境中需要的，上线并不需要这个包的依赖。
安装全部项目依赖包：
1 | npm install |
安装生产环境依赖包：
1 | npm install --production |
我以前的配置中设置了一个变量website，用于静态资源正确找到路径。那如果生产环境和开发环境不一样，而且需要来回切换，这时候需要更好的设置方法。
1 2 3 | var website={ publicPath:"http://192.168.0.104:1717/" } |
修改package.json命令
其实就是添加一个dev设置，并通过环境变量来进行区分，下面是package.json里的值。
1 2 3 4 5 | "scripts": { "server": "webpack-dev-server --open", "dev":"set type=dev&webapck", "build": "set type=build&webpack" }, |
修改webpack.config.js文件
可以利用node的语法来读取type的值，然后根据type的值用if–else判断。
1 2 3 4 5 6 7 8 9 | if(process.env.type== "build"){ var website={ publicPath:"http://192.168.0.104:1717/" } }else{ var website={ publicPath:"http://cdn.jspang.com/" } } |
如果你说我想看一下传过来的值到底是什么？可以用下面的输出语句。
1 | console.log( encodeURIComponent(process.env.type) ); |
MAC电脑下需要把set换成export，并且要多加一个&符，具体代码如下。
1 2 3 4 5 | "scripts": { "server": "webpack-dev-server --open", "dev":"export type=dev&&webpack", "build": "export type=build&&webpack" }, |
先来看一下JavaScript如何实现模块化开发。看下面ES6中的模块化代码。
1 2 3 4 | function jspang(){ alert('jspang.com:'+'webpack'); } module.exports=jspang; |
上面的代码是一个最简单的es6模块化写法，我们声明了一个jspang方法，并且把这个方法用module.exports进行暴露出去。然后我们在入口文件中用import进行引入，并进行使用。
1 2 | import jspang from './jspang.js'; jspang(); |
我们了解如何作Javascript的模块化后，其实webpack的模块化和上边的过程很类似。
为了让大家容易看懂，我把webpack.config.js中的entry入口文件进行模块化设置，单独拿出来制作成一个模块。
首先在根目录，新建一个webpack_config文件夹，然后新建entry_webpack.js文件，代码如下：
entry_webpack.js
1 2 3 4 5 6 7 8 | //声明entry变量 const entry ={}; //声明路径属性 entry.path={ entry:'./src/entry.js' } //进行模块化 module.exports =entry; |
配置的模块化代码编写好以后，需要在webpack.config.js中引入，注意这里的引入只能使用require的方法。
1 | const entry = require("./webpack_config/entry_webpack.js") |
然后在入口文件部分，修改成如下代码：
1 | entry:entry.path, |
使用npm run dev 进行测试，模块化成功了。
总结：模块化在实际工作中是必不可少的操作
在工作中引用第三方的框架是必不可少的，比如引入JQuery或者Vue
其实引用第三方库的方法有很多种，但是有些并不是很优雅，还有些方法会出现打包问题，技术胖在这里介绍一下自己工作中引入第三方模块的方法，我们就拿JQuery为例。小伙伴们要举一反三，学会后试着自己引入Vue试试。
安装JQuery
1 | npm install --save jquery |
安装时需要注意的时Jquery最终要在生产环境中使用，所以我们这里要使用–save进行安装。
修改entry.js文件
安装好后，还需要引入到entry.js中，这里直接使用import进行引入就可以。
1 | import $ from 'jquery'; |
这里引入是不需要写相对路径的，因为jquery的包是在node_modules里的，只要写一个包名jquery，系统会自动查找的。
引入好后可以在entry.js里使用jquery，可以加入下面的代码，然后进行测试。
1 | $('#title').html('Hello JSpang'); |
可以看到上面是标准的jquery代码，你使用npm run server 进行测试，现在代码顺利运行了，这说明引用的JQuery库成功了。需要说的是你不仅可以在入口中进行引入，还可以在任何你需要的js中引入，webpack并不会重复打包，它只打包一次。
如果你觉的上面的方法和webpack没什么关系，只是普通的引入，webpack只是负责了一下打包，这样并没有全局感。那再学习一种在webapck.config.js中配置的方法，这种不需要你在入口文件中引入，而是webpack给你作了全局引入。这个插件就是ProvidePlugin。
ProvidePlugin是一个webpack自带的插件，Provide的意思就是装备、提供。因为ProvidePlugin是webpack自带的插件，所以要先再webpack.config.js中引入webpack。
1 | const webpack = require('webpack'); |
在webpack.config.js里引入必须使用require，否则会报错的，这点小伙伴们一定要注意。
引入成功后配置我们的plugins模块，代码如下。
1 2 3 4 5 | plugins:[ new webpack.ProvidePlugin({ $:"jquery" }) ], |
配置好后，就可以在你的入口文件中使用了，而不用再次引入了。这是一种全局的引入，在实际工作中也可以很好的规范项目所使用的第三方库。
总结：每一个项目都可能引入第三方类库，而像Vue和Angular这样的成熟框架都推出了自己的webpack框架，比如vue-cli。但是很多情况还是需要我们手动更改这些配置好的webpack来适用于我们的公司项目
在初级开发阶段，使用webpack-dev-server就可以充当服务器和完成打包任务，但时随着你项目的进一步完成，可能需要前后台联调或者两个前端合并代码时，就需要一个公共的服务器了。这时候我们每次保存后手动打包显然效率太低，我们希望的场景是代码发生变化后，只要保存，webpack自动为我们进行打包。这个工具就是watch，这节课我们把wacht完全学会，你会发现在开发中更加的得心应手。
–warch直接使用就可以，并没有什么需要讲的。其实这只是初级的用法，但是在学习一种技术时，我们必须要做到了解全部，也就是常说的知其然知其所以然。我们看下面的配置代码，我在代码中已经做出了解释。
1 2 3 4 5 6 7 8 | watchOptions:{ //检测修改的时间，以毫秒为单位 poll:1000, //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作 aggregateTimeout:500, //不监听的目录 ignored:/node_modules/, } |
上边的每一行配置我都作了说明，有时候你在没配置的情况下，直接用webpack –watch是不起作用的，这时候你需要进行配置这些选项。
配置好后，就可以痛快的使用watch了，在大型项目中，这大大加快了开发效率，不用反复的手动打包了。
这个插件就是BannerPlugin，使用后会在JS中加上版权或开发者声明。
1 | new webpack.BannerPlugin('hedong在这里') |
需要注意的是在使用这个插件之前必须引入webpack。
1 | const webpack = require('webpack'); |
这时在dist目录下的entery.js已经加上了版权声明。
作为一个程序员，无论是写什么程序都i要有一颗不断优化的心。webpack在优化这条路上，也为我们作了很多配置，这节课我们就看看工作中常用的webpack优化黑技能。
在第19节中学习了如何引入第三方类库，并引入了jquery，在引用JQuery时我们用了两种方法，第一种时import，第二种时使用ProvidePlugin插件。那两种引入方法有什么区别那?
import引入方法：引用后不管你在代码中使用不适用该类库，都会把该类库打包起来，这样有时就会让代码产生冗余。
ProvidePlugin引入方法：引用后只有在类库使用时，才按需进行打包，所以建议在工作使用插件的方式进行引入。
具体的对比操作，会在视频中演示，你会看出两种引入方法的对比打包结果。差距还是蛮大的。
上边的方法只是优化的第一步，工作中你会发现，不适用的类库几乎我们也不会引入，所以上边只是一个必要操作的第一步。那往往把第三方类库抽离出来，才是最好的解决方法。
第一步：修改入口文件
抽离的第一步是修改入口文件，把我们的JQuery也加入到入口文件中，看下面的代码。
webpack.config.js
1 2 3 4 | entry:{ entry:'./src/entry.js', jquery:'jquery' }, |
第二步：引入插件
我们需要引入optimize优化插件，插件里边是需要配置的，具体配置项看下面的代码。
1 2 3 4 5 6 7 8 | new webpack.optimize.CommonsChunkPlugin({ //name对应入口文件中的名字，我们起的是jQuery name:'jquery', //把文件打包到哪里，是一个路径 filename:"assets/js/jquery.min.js", //最小打包的文件模块数，这里直接写2就好 minChunks:2 }), |
minChunks一般都是固定配置，但是不写是不行的，你会打包失败。
filename是可以省略的，这是直接打包到了打包根目录下，我们这里直接打包到了dist文件夹下边。
配置完成后，我们可以先删掉以前打包的dist目录，然后用webpack再次打包，你会发现jquery被抽离了出来，并且我们的entry.js文件变的很小。
会了如何抽离Jquery，但是在实际开发中，我们会引用不止一个第三方类库，这时也需要抽离。我们拿引入Vue为例，看看如何抽离出来。
第一步:我们先用npm 进行安装。
1 | npm instawll vue --save |
注意这里是–save，而不是–save-dev。因为这个类库在生产环境中也是要使用的。
第二步：在入口配置中引入vue和jquery
1 2 3 4 5 | entry:{ entry:'./src/entry.js', jquery:'jquery', vue:'vue' }, |
只是多比上边多加了一个vue选项。
第三步：修改CommonsChunkPlugin配置
需要修改两个位置：
第一个是在name属性里把原来的字符串改为数组，因为我们要引入多个模块，所以是数组；
第二个是在filename属性中把我们输出的文件名改为匹配付[name],这项操作就是打包出来的名字跟随我们打包前的模块。
下面是我们修改的代码，你可以跟jquery抽离时对比一下。
1 2 3 4 5 6 7 8 | new webpack.optimize.CommonsChunkPlugin({ //name对应入口文件中的名字，我们起的是jQuery name:['jquery','vue'], //把文件打包到哪里，是一个路径 filename:"assets/js/[name].js", //最小打包的文件模块数，这里直接写2就好 minChunks:2 }), |
配置好后，我们就可以在控制台输入webpack进行打包了。你会看到我们预想的结果，jquery和vue都被我们抽离出来了。
总结：在项目开发中，我们很使用很多第三方类库，那好的做法就是把第三方这些类库全部抽离处理，这样在项目维护和性能上都是不错的选择。
工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片。项目组长会要求你打包时保留这些静态资源，直接打包到制定文件夹。其实打包这些资源只需要用到copy-webpack-plugin。
copy-webpack-plugin就是专门为我们作静态资源转移的插件，不过它不同上两节使用的插件，它是需要安装的。
插件安装
插件的安装只要使用npm就可以了。
1 | cnpm install --save-dev copy-webpack-plugin |
如果在安装过程中出错，你可以使用npm来进行安装。
引入插件
安装好后，需要在webpack.config.js文件的头部引入这个插件才可以使用。
1 | const copyWebpackPlugin= require("copy-webpack-plugin"); |
配置插件
引入之后我们就可以在plugins里边进行配置插件了，我们先看下面的插件配置代码，然后再进行详细讲解。
1 2 3 4 | new copyWebpackPlugin([{ from:__dirname+'/src/public', to:'./public' }]) |
from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。
to:要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname。
配置好后，我们就可以使用webpack 进行打包了，你会发现图片按照我们的配置打包了过去。
在实际工作中，我们的项目都会配置一个Json的文件或者说API文件，作为项目的配置文件。有时候你也会从后台读取到一个json的文件，这节课就学习如何在webpack环境中使用Json。如果你会webpack1或者webpack2版本中，你是需要加载一个json-loader的loader进来的，但是在webpack3.x版本中，你不再需要另外引入了。
第一步：现在我们的index.html模板中加入一个层，并给层一个Id，为了是在javascript代码中可以方便引用。
1 | <div id="json"></div> |
第二步：到src文件夹下，找到入口文件，我这里是entry.js文件。修改里边的代码，如下：
1 2 | var json =require('../config.json'); document.getElementById("json").innerHTML= json.name; |
这两行代码非常简单，第一行是引入我们的json文件，第二行驶写入到到DOM中。
第三部：启用我们的npm run server 命令就可以在浏览器中看到结果了。
其实在webpack3中启用热加载相当的容易，只要加入HotModuleReplacementPlugin这个插件就可以了。
1 | new webpack.HotModuleReplacementPlugin() |
现在只要你启动 npm run server 后，修改index.html中的内容，浏览器可以自动给我们更新出最新的页面。
但这里说的热加更新和我们平时写程序的热加载不是一回事，比如说我们Vue或者React中的热更新，并不是刷新整个页面，而是一个局部更新，而这里的更新是重新刷新了页面。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
