Webpack
什么是WebPack?
- WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。在3.0出现后,Webpack还肩负起了优化项目的责任。
- 打包:可以把多个Javascript文件打包成一个文件,减少服务器压力和下载带宽。
- 转换:把拓展语言转换成为普通的JavaScript,让浏览器顺利运行。
- 优化:前端变的越来越复杂后,性能也会遇到问题,而WebPack也开始肩负起了优化和提升性能的责任。
安装webpack
- 具体安装方法:
- 用win+R打开运行对话框,输入cmd进入命令行模式。然后找到你想开始项目的地方,输入下方代码:
1. mkdir webpack_demo //这句是建立文件夹
2. cd webpack_demo //进入这个文件夹
- 通过下面命令安装WebPack。
需要注意的是,你在执行下一步时必须安装node,可以通过 node -v来查看node安装情况和版本,如果没有安装,要先安装node才可以继续进行.
//全局安装
3.npm install -g webpack
如果你这时安装失败了(出现了报错信息),一般有三种可能:
- 检查你node的版本号,如果版本号过低,升级为最新版本。
- 网络问题,可以考虑使用cnpm来安装(这个是淘宝实时更新的镜像),具体可以登录cnpm的官方网站学习http://npm.taobao.org/。
- 权限问题,在Liux、Mac安装是需要权限,如果你是Windows系统,主要要使用以管理员方式安装.
- 用win+R打开运行对话框,输入cmd进入命令行模式。然后找到你想开始项目的地方,输入下方代码:
注意:全局安装是可以的,但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败
- 对项目目录进行安装
4. npm init //初始化项目 ,初始化的主要目的是生成package.json文件(这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等
5. npm install --save-dev webpack //进行项目目录的安装,这里的参数–save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用
6. webpack -v //查看webpack版本
建立基本项目结构
- 在根目录建立两个文件夹,分别是src文件夹和dist文件夹
- src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。
- dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。
- 你可以理解成src是源码文件,dist是我们编译打包好的文件;一个用于开发环境,一个用于生产环境
- 编写程序文件:
- dist文件下手动建立一个index.html
<!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
document.getElementById('title').innerHTML='Hello Webpack';
- 打包
- {entery file}:入口文件的路径,本文中就是src/entery.js的路径;
- {destination for bundled file}:填写打包后存放的路径。
- 注意:在命令行中是不需要写{ }的
webpack {entry file} {destination for bundled file}
所以例子中执行:
webpack src/entry.js dist/bundle.js
- 但是在webpack4中执行以上操作会报错,报错信息会提醒,会报缺少webpack-cli,所以要添加上webpack-cli回车安装下
- 安装完之后执行webpack-v才能出现版本号,但是执行打包操作还是会报错
webpack官网更新日志有说明:webpack升级4.0新增mode属性 解决方法:
- package.json中设置
"scripts": {
"dev": "webpack --mode development", // 开发环境
"build": "webpack --mode production", // 生产环境
},
- webpack.config.js中设置
module.exports = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' }, mode: 'development' // 设置mode }
- package.json中设置
配置文件:入口和出口
- 配置文件
webpack.config.js
webpack.config.js
就是Webpack的配置文件,这个文件需要自己在项目根目录下手动建立。建立好后我们对其进行配置,先看下面的代码(webpack.config.js的基本结构),这是一个没有内容的标准webpack配置模版
module.exports={
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
- entry:配置入口文件的地址,可以是单一入口,也可以是多入口。
- output:配置出口文件的地址,在webpack2.X版本后,支持多出口配置。
- module:配置模块,主要是解析CSS和图片转换压缩等功能。
- plugins:配置插件,根据你的需要配置不同功能的插件。
- devServer:配置开发服务功能,后期我们会详细讲解。
命令执行成功后,会在dist目录下出现bundle.js文件,这时我们就可以在浏览器中预览结果了,网页中显示出了Hello Webpack的信息。
案例中的配置如下:
const path = require('path'); //需在头部移入path,否则找不到path
module.exports={
//入口文件的配置项
entry:{
entery:'./src/entery.js' //写的那个js代码路径
},
//出口文件的配置项
output:{
//输出的路径,用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'bundle.js' //打包后放在的文件名
},
mode: 'development', // 设置mode webpack4添加mode属性
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
这个代码写完后,可以在终端中直接输入webpack就会进行打包
- 多入口、多出口配置
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:{}
}
[name]
的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件
配置文件: 服务和热更新
- webpack-dev-server:是一个小型的Node.js Express服务器
- 设置webpack-dev-server:要执行webpack-dev-server是要先用
npm install webpack-dev-server –save-dev
来进行下载的。下载好后,需要配置一下devServer。最简单的devServer配置项只有四个
/webpack.config.js
devServer:{
//设置基本目录结构
contentBase:path.resolve(__dirname,'dist'),
//服务器的IP地址,可以使用IP也可以使用localhost
host:'localhost',
//服务端压缩是否开启
compress:true,
//配置服务端口号
port:1717
}
- contentBase:配置服务器基本运行路径,用于找到程序打包地址。
- host:服务运行地址,建议使用本机IP,这里为了讲解方便,所以用localhost。
- compress:服务器端压缩选型,一般设置为开启,如果你对服务器压缩感兴趣,可以自行学习。
- port:服务运行端口,建议不使用80,很容易被占用,这里使用了1717
- 安装:
npm install webpack-dev-server --save-dev
在package.json里面添加:
/package.json
"scripts": {
"server":"webpack-dev-server"
},
配置好保存后,在终端里输入npm run server
打开服务器。然后在浏览器地址栏输入http://localhost:1717
就可以看到结果了。 - 支持热更新
在npm run server 启动后,它是有一种监控机制的(也叫watch)。它可以监控到我们修改源码,并立即在浏览器里给我们更新。
模块:CSS文件打包
Webpack在生产环境中有一个重要的作用就是减少http的请求数,就是把多个文件打包到一个js里,这样请求数就可以减少好多。把css文件打包,需要先对webpack.config.js里的Loaders配置项进行了解。
- Loaders
Loaders是Webpack最重要的功能之一,他也是Webpack如此盛行的原因。通过使用不同的Loader,Webpack可以的脚本和工具,从而对不同的文件格式进行特定处理。
- 可以把SASS文件的写法转换成CSS,而不在使用其他转换工具。
- 可以把ES6或者ES7的代码,转换成大多浏览器兼容的JS代码。
- 可以把React中的JSX转换成JavaScript代码
注意:所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置。下面我们对Loaders的配置型简单梳理一下。
- test:用于匹配处理文件的扩展名的表达式,这个选项是必须进行配置的;
- use:loader名称,就是你要使用模块的名称,这个选项也必须进行配置,否则报错;
- include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
- query:为loaders提供额外的设置选项(可选)
打包CSS文件:要打包CSS你必须先要有个CSS文件,在/src目录下,我们建立一个css文件夹,在文件夹里建立index.css文件。代码内容如下
./src/css/index.css
body{
background-color: red;
color: white;
}
CSS文件建立好后,需要引入到入口文件中,才可以打包到,这里我们引入到entry.js中。
/src/entery.js中在首行加入代码
import css from './css/index.css';
CSS和引入做好后,我们就需要使用loader来解析CSS文件了,这里我们需要两个解析用的loader,分别是style-loader和css-loader.
npm install style-loader --save-dev
npm install --save-dev css-loader
在webpack.config.js进行配置loader
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
再执行以上的操作即可有样式效果
插件配置:配置JS压缩
现在你写的JS代码,在上线之前,都是需要进行压缩的,在没有webpack和gulp这些工具前,你可能需要找一个压缩软件或者在线进行压缩,在Webpack中可以很轻松的实现JS代码的压缩,它是通过插件的方式实现的,这里我们就先来引入一个uglifyjs-webpack-plugin(JS压缩插件,简称uglify)。
注意:虽然uglifyjs是插件,但是webpack版本里默认已经集成,不需要再次安装。
- 引入:我们需要在webpack.config.js中引入uglifyjs-webpack-glugin插件
const uglify = require('uglifyjs-webpack-plugin');
引入后在plugins配置里new一个 uglify对象就可以了,代码如下
plugins:[
new uglify()
],
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
}
}
插件配置:HTML文件的发布
index.html直接放到了dist文件夹下,这肯定是不正确的,应该放到我们src目录下。但是前期我们为了循序渐进的学习,所以把index.html放到了dist目录下。这节课我们就学习如何把html文件打包到我们的生产路径下.
+ 打包HTML文件
我们先把dist中的html文件剪切到src目录中,并去掉我们的JS引入代码(webpack会自动为我们引入JS),因为这才是我们真实工作的目录文件结构。
然后我们配置webpack.config.js文件,先引入我们的html-webpack-plugin插件
const htmlPlugin= require('html-webpack-plugin');
引入后使用npm进行安装包
npm install --save-dev html-webpack-plugin
最后在webpack.config.js里的plugins里进行插件配置
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文件