一、webpack介绍
1、由来
由于前端之前js、css、图片文件需要单独进行压缩和打包,这样团队人员处理很繁琐,然后 Instagram 团队就想让这些工作自动化,然后webpack应运而生。
2、介绍
webpack是一个模块打包器(module bundler),webpack视HTML,JS,CSS,图片等文件都是一种 资源 ,每个资源文件都是一个模块(module)文件,webpack就是根据每个模块文件之间的依赖关系将所有的模块打包(bundle)起来。
3、作用
- 对 CommonJS 、 AMD 、ES6的语法做了兼容
- 对js、css、图片等资源文件都支持打包(适合团队化开发) ,比方你写一个js文件,另外一个人也写一个js文件,需要合并很麻烦,现在交给webpack合并很简单
- 有独立的配置文件webpack.config.js
- 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
- 具有强大的Plugin(插件)接口,大多是内部插件,使用起来比较灵活
4、拓展说明
CommonJS、AMD、CMD是用于JavaScript模块管理的三大规范,CommonJS定义的是模块的同步加载,是一个更偏向于服务器端的规范(也可以在浏览器中使用),主要用于Nodejs,根据CommonJS规范,一个单独的文件就是一个模块,加载模块使用require()方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。
AMD和CMD则是定义模块异步加载适用于浏览器端,都是为了 JavaScript 的模块化开发,(这里说一下为什要有异步加载,因为浏览器如果使用common.js同步加载模块的话,就会导致性能等问题,所以针对这个问题,又出了一个规范,这个规范可以实现异步加载依赖模块)
AMD规范会提前加载依赖模块,AMD规范是通过requireJs 在推广过程中对模块定义的规范化产出。
CMD规范会延迟加载依赖模块, CMD 规范是 SeaJs 在推广过程中对模块定义的规范化产出。
AMD规范和CMD规范的区别
对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)
CMD 推崇依赖就近,AMD 推崇依赖前置
AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹
webpack和gulp的区别
gulp是前端自动化构建工具,强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事情(代码压缩、合并、编译、浏览器实时更新等),然后定义执行顺序,来让gulp执行这些task,从而构建项目的整个前端开发流程,自动化构建工具并不能把所有模块打包到一起,也不能构建不同模块之间的依赖关系。
webpack是 JavaScript 应用程序的模块打包器,强调的是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片、js文件、css文件等)都看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。
5、webpack整体认知
(1)、webpack的核心概念分为 入口(Entry)、加载器(Loader)、插件(Plugins)、出口(Output);
入口(Entry):入口起点告诉 webpack 从哪里开始,并根据依赖关系图确定需要打包的文件内容
加载器(Loader):webpack 将所有的资源(css, js, image 等)都看做模块,但是 webpack 能处理的只是 JavaScript,因此,需要存在一个能将其他资源转换为模块,让 webpack 能将其加入依赖树中的东西,它就是 loader。loader用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。
1
2
3
4
5
6
7js
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]插件(Plugins):loader 只能针对某种特定类型的文件进行处理,而 plugin 的功能则更为强大。在 plugin 中能够介入到整个 webpack 编译的生命周期,Plugins用于解决 loader 无法实现的其他事情,也就是说loader是预处理文件,那plugin 就是后处理文件。比如对loader打包后的模块文件(bundle.js)进行二次优化处理,例如:代码压缩从而减小文件体积;提供辅助开发的作用:例如:热更新(浏览器实时显示)
1
2
3
4plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
二、webpack安装
1、安装node
使用 node -v 命令检查版本
2、安装cnpm
1 | npm install -g cnpm --registry=https://registry.npm.taobao.org |
使用 cnpm -v 命令检查版本
3、安装nrm的两种方法
nrm可以帮助我们切换不同的NPM源的快捷开关,可以切换的NPM源包括:npm,cnpm,taobao, rednpm, npmMirror , edunpm
第一种方法(由于是外网访问进行安装,可能会被墙)
1 | npm install -g nrm |
第二种方法(国内的淘宝镜像,访问稳定,推荐)
1 | cnpm install -g nrm |
使用 nrm - V 命令检查版本(注意这里的 V 是大写的)
使用nrm ls 命令可以查看当前可以可以切换的 NPM源
使用 npm use cnpm 命令 指定要使用的哪种NPM源
4、安装webpack
全局安装
1 | npm install --global webpack |
在项目中安装最新版本或特定版本,分别执行以下命令:
1 | npm install --save-dev webpack |
三、webpack配置
0、搭建项目结构
1 | Project |
1、初始化一个项目(会创建一个package.json文件)
1 | npm init |
2、在当前的项目中安装Webpack作为依赖包
1 | npm install --save-dev webpack |
–save :将配置信息保存到package.json中,也是项目生产环境,项目发布之后还依赖的东西,保存在dependencies
–save-dev :是项目开发环境依赖的东西,保存在devDependencies中, 例如:写 ES6 代码,如果你想编译成 ES5 发布那么 babel 就是devDependencies
3、当前项目结构
4、实现CSS打包
1 | cnpm install css-loader style-loader --save-dev |
在src—>css目录中新建main.css
1 | css |
在webpack.config.js中配置相关的loader
1 | const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径 |
在main.js中获取css目录中的main.css文件
1 | // 1、获取index.html中的dom对象 |
在终端中输入 webpack命令进行css文件打包
5、实现SCSS打包
在src目录中新建 sass目录–> scss1.scss
1 | // scss1.scss文件 |
安装对应的loader
1 | cnpm install sass-loader css-loader style-loader node-sass webpack --save-dev |
在webpack.config.js中配置相关的loader
1 | const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径 |
在js目录中 main.js里面引入 scss1.scss
1 | // 1、获取index.html中的dom对象 |
在终端中输入 webpack命令进行scss文件打包
6、实现打包url资源(图片、gif、图标等)功能
在src 目录中 新建imgs目录,放入两张不同大小的图片
在index.html中新增 < div id=”bg1” >< /div > < div id=”bg2” >< /div >
在mian.css中新增
// mian.css文件
1 | #bg1{ |
1 | #bg2{ |
如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。
其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。
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;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
安装
1 | cnpm install url-loader file-loader --save-dev |
在webpack.config.js中配置相关的loader
1 | const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径 |
在main.js中引入mui目录中icons-extra.css的文件
1 | // 6、获取src目录中的mui目录中icons-extra.css的文件 |
7、Webpack-dev-server结合后端服务器的热替换配置
webpack-dev-server提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading),同时把生成好的js和html构建到我们的电脑内存中,这样的话,即使我们的目录中没有了相关js等文件,还能够加载出来,这样能够提高我们页面运行速度。
安装 webpack-dev-server 插件
1 | cnpm install webpack-dev-server --save-dev |
1 | // webpack.config.js |
1 | // package.json |
在命令行中运行 npm start,就会看到浏览器自动加载页面。如果现在修改和保存任意源文件,web 服务器就会自动重新加载编译后的代码,但是打开后发现,打开的是 dist目录,我们想要的是 index.html显示我们的页面,所以这是我们还要借助里另一个 html-webpack-plugin 插件。
8、html-webpack-plugin 插件安装
html-webpack-plugin 简单创建 HTML 文件,用于服务器访问,其中包括使用script标签的body中的所有webpack包。
安装 html-webpack-plugin 插件
1 | cnpm install --save-dev html-webpack-plugin |
webpack.config.js配置
1 | // webpack.config.js |
再次使用npm start命令就可以实现浏览器自动更新。
问题来了,HtmlWebpackPlugin中的 title并没有显示出来,原因是需要在定义的template模板中使用ejs语法,
1 |
|
9、ES6转换为ES5语法
安装
1 | cnpm install --save-dev babel-loader babel-core babel-preset-env |
babel-core 如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块
babel-preset-env 通过根据您的目标浏览器或运行时环境自动确定您需要的Babel插件
babel 对一些公共方法使用了非常小的辅助代码,比如 _extend。 默认情况下会被添加到每一个需要它的文件中,你可以引入 babel runtime 作为一个独立模块,来避免重复引入。
你必须执行 npm install babel-plugin-transform-runtime –save-dev 来把它包含到你的项目中,也要使用 npm install babel-runtime –save 把 babel-runtime 安装为一个依赖
配置
1 | // 实现 url 资源打包 |
把一些代码改成ES6 语法的写法
1 | // moudule1.js |
1 | // main.js |
10、防止文件缓存(生成带有20位的hash值的唯一文件)
1 | // webpack.config.js |
11、抽取CSS为单独文件
安装插件从 build.js文件中提取文本(CSS)到单独的文件
1 | npm install --save-dev extract-text-webpack-plugin |
1 | // webpack.config.js |
12、开发环境和生产环境的分离
(1)开发环境与生产环境分离的原因如下:
在开发环境中,我们使用热更新插件帮助我们实现浏览器的自动更新功能,我们的代码没有进行压缩,如果压缩了不方便我们调试代码等等,所以以上这些代码不应出现在生产环境中。
生产环境中,我们把项目部署到服务器时,我们会对代码进行各种各样的优化,比如压缩代码等等,这时候我们不应该把这些代码放到开发环境中,不利于代码开发和调试。
总结:针对以上这些说明,我们很有必要把区分开发环境与生产环境分离。
(2)开发环境的配置和生产换环境配置的区别。
开发环境有的配置,生产环境不一定有,比如说热更新时使用到的HotModuleReplacementPlugin。
生产环境有的配置,开发环境不一定有,比如说用来压缩js用的UglifyJsPlugin。
(3)如何是开开发和生产分离?
1> 因为webpack 默认找的是 webpack.config.js配置文件,所以要把开发环境的webpack.config.js配置文件改为webpack.dev.config.js代表开发环境的配置文件。
2> 新建一个webpack.prod.config.js,再把开发环境中的webpack.config.js复制进去(没用的配置文件该删除的删除)
3> 修改package.json文件(在scripts 标签中添加”dev”和”prod” 属性配置)
1
2
3
4
5
6js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --config webpack.dev.config.js",
"prod": "webpack --config webpack.prod.config.js"
},执行构建命令
1
2
3
4执行开发环境的中配置
npm run dev
执行生产环境的中配置
npm run prod
13、在生产环境中配置代码压缩功能
配置webpack.prod.config.js 文件
1 | // webpack.prod.config.js |
执行 npm run prod 命令