Webpack
程序员文章站
2022-07-12 19:19:37
...
概述
Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包
优点:
1.模块化开发
2.编译typescript、ES6等高级js语法
3.CSS预编译
缺点:
1.配置稍微繁琐
2.文档不够丰富
安装webpack
1. 安装node.js,下载安装后查看版本
node -v
2. 安装npm
node.js已经集成了npm工具 npm-v查看npm版本
npm config ls 查询NPM管理包路径
NPM默认的管理包路径在C:/用户/[用户名]/AppData/Roming/npm/node_meodules，
为了方便对依赖包管理，我们将管理包的路径设置在单独的地方
npm config set prefix "C:\Program Files\nodejs\npm_modules"
npm config set cache "c:\Program Files\nodejs\npm_cache"
配置环境变量
NODE_HOME = C:\Program Files\nodejs (node.js安装目录)
在PATH变量中添加：%NODE_HOME%;%NODE_HOME%\npm_modules;
在开发中通常我们使用国内镜像，这里我们使用淘宝镜像,安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v 查看版本
nrm ls 查看镜像已经指向taobao(如果没有nrm就全局安装 cnpm install -g nrm)
3.安装webpack
npm install webpack -g 或 cnpm install webpack -g
安装指定版本
npm install [email protected] -g 或 cnpm install [email protected] -g
打包一个项目(以简单的VueDemo为例)
webpacktest目录下有
vue.min.js(Vue的类库)
vue.html(简单的vue实例求和,有一个方法sub,方法中依赖module.js中的add)
module.js(// 定义add函数function add(x, y) {return x + y})
步骤:
1.把分模块中定义的方法导出来
(单个)module.exports.add = add;
(多个)module.exports.add = add;module.exports.subtraction = subtraction;
2.定义main.js入口文件(主文件)
1.导入用到的模块的方法
(单个) var {add} = require('./module');
(多个) var {add,subtraction} = require('./module01');
2.把vue中写的script抽取到这里
引入Vue类库
var Vue = require('./vue.min');
引入方法
var VM = new Vue({
el:"#app",
data:{
num1:0,
num2:0,
result:0
},
methods:{
sub:function(){
this.result =add(Number.parseInt(this.num1),Number.parseInt(this.num2))
}
}
})
3.使用webpack打包js
进入目录执行 webpack main.js build.js
4.在页面引入build.js
webpack-dev-server
webpack-dev-server开发服务器，它的功能可以实现热加载 并且自动刷新浏览器。
示例准备:
创建webpacktest2目录,在目录下创建src目录、dist目录
将main.js、module.js、vue.min.js拷贝到src目录
步骤
1.安装webpack-dev-server,以及html-webpack-plugin(一般不安装成全局的)
cnpm install [email protected] [email protected] [email protected] --save-dev
安装完程序目录出现一个package.json文件以及node_modules文件夹
2.配置webpack-dev-server
在package.json中配置script
配置完成如下
devDependencies：开发人员在开发过程中所需要的依赖。
scripts：可执行的命令
{
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
* --inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1，如果对外发布则填写公网ip地址
3.配置webpack.config.js
在根目录引入模板网页
vue.html(不需要引入任何js)
在根目录创建webpack.config.js
//引入html-webpack插件
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
path : __dirname+'/dist', // 注意：__dirname表示webpack.config.js所在目录的绝对路径
filename:'build.js' //输出文件
},
devtool: 'eval-source-map',
plugins:[
new htmlwp({
title: '首页', //生成的页面标题<head><title>首页</title></head>
filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
template: 'vue.html' //根据vue.html这个模板来生成(这个文件请程序员自己生成)
})
]
}
4.使用webpack命令启动程序
npm run dev
npm run build(仅打包)
或者
在工具中的package.json上右键 show npm Scripts->双击命令
*.webpac debug调试
1. 在webpack.config.js加入 devtool: 'eval-source-map',
2. 在js中跟踪代码的位置上添加debugger
如
// 定义add函数
function add(x, y) {
debugger
return x + y
}
启动应用,打开控制台即进入debugger代码位置
下一篇： 使用jQuery轻松实现Ajax