作者是名退役复学在校大学生,对jdk、spring、springboot、springcloud、mybatis等开源框架源码有一定研究,欢迎关注,和我一起交流。 今天手把手教学webpack,奶爸级教学,一键三连收藏起来吧。
目录
一、webpack
二、前端模块化
1、传统的开发模式
2、使用ES6模块化
3、使用CommonJS规范
三、webpack配置文件
四、项目管理文件
五、webpack的loader
1、处理CSS
2、处理图片
3、ES6转ES5
4、打包Vue
六、plugin
1、添加版权的plugin
2、打包html的plugin
3、压缩js的plugin
七、搭建本地服务
webpack 中文文档 | webpack 中文网
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
编辑
编辑
编辑
// a.js
const moduleA = (function() {
var name = '张三'
var age = 20
if(age >= 18) {
console.log('成年人');
}
return {
name,
age
}
})()
// b.js
const moduleB = (function() {
var age = 10
return {
age
}
})()
// c.js
console.log(moduleA.age);
if(moduleA.age >= 18) {
console.log('成年人');
}
编辑
<script src="./js/a.js" type="module"></script>
<script src="./js/b.js" type="module"></script>
<script src="./js/c.js" type="module"></script>
编辑
原因:只支持协议http, data, chrome, chrome-extension, https,这边直接使用file文件打开,属于file协议
解决:
第一种:
1、安装【anywhere】插件,搭建一个服务器。使用命令【npm i anywhere -g】,需要node环境支持。
2、打开终端,切换到当前项目目录下
3、使用命令【anywhere】启动
4、根据终端输出的地址去访问html,后面跟上html所在的路径
第二种:
商店搜索【Live Server】安装,安装完之后,在html文件里面右键,选择【Open With live server】
仍然报错
编辑
原因:使用ES6模块化操作,使用type="module"引入js文件,js文件就是一个单独的模块,外部无法访问
解决:每个js模块需要导出给外部访问的成员
编辑
编辑
编辑
编辑
编辑
CommonJS规范 - 简书
编辑
编辑
每次都要输入打包的文件和生成后的地址,比较麻烦,可以使用webpack的配置文件
require('path'),node自带的一个模块,用来处理路径
entry:入口函数,要处理文件
output:出口,输出文件的位置
resolve()拼接路径
__dirname:node环境全局变量,当前文件的绝对路径
######
前面的命令默认去全局配置的找运行依赖,但是一个项目应该有属于自己项目的依赖,而且项目使用了哪些依赖应该记录下来
使用命令初始化【npm init】package.json文件
我们使用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖
在实际项目中不仅仅有js文件,还有css、图片,ES6转化ES5,TypeScript转化ES5代码,将less,scss转化css,将jsx,vue文件转化js文件等
对于webpack本身来说是不具备这些转化功能的,这时候必须使用对应的loader进行处理
大部分的loader都可以在webpack的官网中找到,并且学习相应的用法
如何使用???
css-loader | webpack 中文网
编辑
编辑
编辑
编辑
编辑
编辑
检查打包后的文件有es6代码,有的浏览器还不支持es6,所以有时候我们需要将es6的代码转化成es5
编辑
如果你不行的话试一下这个版本号
编辑
编辑
编辑
编辑
编辑
现在的内容都写在Vue实例里面,现在剥离出来,通过注册组件的方式实现
编辑
把变量App分离到单独的文件
编辑
使用.vue文件
编辑
打包会报错,没有loader处理.vue这种文件类型,安装vue-loader【npm i vue-loader@14】【npm i vue-template-compiler】
配置modle
{
test: /\.vue$/,
use: ['vue-loader'],
},
打包成功
现在要开发一个组件就很容易了,进行了模块化,一个组件就是一个单独的文件
编辑
编辑
打包后的dist文件夹没有html文件,不完整
安装【npm i html-webpack-plugin@3】
编辑
现在dist已经有html文件了,但是我们要在添加#app的div上去,默认只是一个基本的html文件
加上配置
编辑
这时候打包出来的html是我们设计好的html文件,自动加上了js的引用
打包出来js文件比较大,需要压缩
安装【npm i uglifyjs-webpack-plugin@1】
配置
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
new uglifyjsWebpackPlugin(),
现在预览效果需要每次打包,比较麻烦
webpack提供了一个可选的本地开发服务器,可以实现浏览器自动刷新显示修改后的结果
安装【npm install webpack-dev-server】
终端输入【webpack-dev-server】,报错默认去全局找,所以需要局部配置
终端输入【npm init】生成项目管理文件package.json
配置script
编辑
使用命令【npm run dev】启动
修改配置
编辑
自动打开浏览器
编辑