1、安装
先装好node和npm,因为webpack是一个基于node的项目。然后npm install -g webpack
全局安装
官方不建议全局安装webpack,所以还要进行本地安装
2、进入项目文件夹,比如webpack_demo,然后新建一个package.json的文件在项目根目录下
npm init //询问一些问题:按回车选择默认值 自动生成文件package.json
npm install --save-dev webpack //本地安装,
目前是开发环境,所以需要加上-dev,用户运行不需要依赖这个包
如果用户运行需要依赖这个包,那么就不加-dev,直接是--save,保存到生产环境
至此,webpack安装完成
3、在项目根目录下,建立
src源代码文件夹——开发环境
dist生产环境文件夹
- ./是当前目录
- ../是父级目录
- /是根目录
3、在命令行中分别执行以下命令,安装对应的插件(--save-dev作用是安装的插件的同时,将插件名写入package.json的devDependencies列表中)
npm install webpack --save-dev
npm install jquery --save-dev
npm install style-loader css-loader --save-dev
npm install extract-text-webpack-plugin –-save-dev
4、webpack ./src/entery.js -o dist/bundle.js --mode development 在终端(命令行)中使用webpack打包
下面介绍使用配置文件进行打包
5、创建webpack.config.js
module.exports={
//入口文件的配置项
entry:{},
//出口文件的配置项
output:{},
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
- entry:配置入口文件的地址,可以是单一入口,也可以是多入口。
- output:配置出口文件的地址,在webpack2.X版本后,支持多出口配置。
- module:配置模块,主要是解析CSS和图片转换压缩等功能。
- plugins:配置插件,根据你的需要配置不同功能的插件。
- devServer:配置开发服务功能,后期我们会详细讲解。
- [name]的意思是根据入口文件的名称,打包成相同的名称,有几个入口文件,就可以打包出几个文件
配置文件参数说明:
- entry: 是 页面入口文件配置 (html文件引入唯一的js 文件)
- output:对应输出项配置
- path :入口文件最终要输出到哪里,
- filename:输出文件的名称
-
publicPath:公共资源路径
- webpack:普通打包
- webpack -p:压缩打包
- webpack -p -w:监听所有需要打包的代码,只要有代码被改动并保存后,就会自动进行打包
6、热更新
a.配置devServer
devServer:{
contentBase:path.resolve(__dirname,'dist') //基本目录结构,监听哪里的代码
host:'10.1.28.102', //ip地址,不建议填localhost 命令行ipconfig查看ipv4的值即是ip地址
compress:true, //服务器压缩参数,是否启用服务器压缩,一般启用
port:1717 //任何喜欢的数字
}
b.安装服务:npm install webpack-dev-server --save-dev
6、live-server
本地开发常常需要搭建临时的服务,第一时间我们会想到用http-server。
但现在流行修改文件浏览器自动刷新hot socketing(热拔插),如live-reload。
若想浏览器自动打开项目,用opener。
现在live-server实现了三个插件的所有功能,并且很简单就能启动一个看起来很专业的本地服务
- 初始化npm:npm init
- 安装live-server:cnpm install -g live-server
- 启动live-server:live-server
如果你比较懒,可以在package.json中增加start中增加新的脚本
"scripts": {
"server": "live-server ./ --port=9090"
}
然后执行 npm run server
浏览器会自动打开,并且当你修改本地文件,浏览器都会立即同步
7、const path = require('path');
path.resolve(__dirname,'dist'); //dist目录所在的绝对路径