3 Webpack
1 什么是Webpack
https://webpack.js.org/ (官网)
webpack 是一个现代 javascript 应用程序的 静态模块打包器 (module bundler)
待会要学的 vue-cli 脚手架环境, 集成了 webpack, 所以才能对各类文件进行打包处理
webpack是一个 静态模块 打包器,可以做以下的这些工作
-
语法转换(主要是浏览器兼容)
- less/sass转换成css
- ES6转换成ES5
- …
-
html/css/js 代码压缩合并 (打包)
-
webpack可以在开发期间提供一个开发服务器
可以把它看成maven中工程自动化那部分(jar) ,前端项目也是先打包再上线
2 Webpack安装
全局安装
cnpm install webpack@4.41.5 -g
cnpm install webpack-cli@3.3.12 -g
安装后查看版本号
webpack -v
webpack-cli -v
3 快速入门 (js打包)
方式一:webpack原始方式
(1)新建文件夹 work3,在创建src文件夹,创建 bar.js
exports.info=function(str){document.write(str);
}
(2)src下创建logic.js
exports.add=function(a,b){return a+b;
}
(3)src下创建main.js
var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));
说明:上述具有多个js文件,那么我们在实际开发中使用的时候会导入过多的js文件,使用起来不方便,那么我们可以将上述多个js文件打包成一个js文件。
(4)创建配置文件webpack.config.js ,该文件与src处于同级目录
var path = require("path"); // 导入 node.js 中专门操作路径的模块,固定写法
//执行webpack命令的时候会读取到module.exports中的内容
module.exports = {//执行webpack命令的时候,读取入口main.js,由于main.js关联bar.js和logic.js,所以会将这三个js文件合并到一个js文件中entry: './src/main.js', // 打包入口文件的路径//输出文件位置output: {//__dirname表示当前工程目录path: path.resolve(__dirname, './dist'), // 输出文件的存放路径filename: 'bundle.js' // 输出文件的名称}
};
以上代码的意思是:读取当前目录下src文件夹中的main.js(入口文件)内容,把对应的js文件打包,打包后的文件放入当前目录的dist文件夹下,打包后的js文件名为bundle.js
webpack 的 4.x 版本中默认约定:
- 打包的入口文件为 src -> main.js
- 打包的输出文件为 dist -> index.js
(5)执行编译命令
webpack
执行后查看bundle.js 会发现里面包含了上面两个js文件的内容
(6)创建index.html ,引用bundle.js
<!doctype html>
<html><head> </head><body> <script src="dist/bundle.js"></script></body>
</html>`
创建完毕,完整目录如下
测试调用index.html,会发现有内容输出:Hello world!300
方式二:基于NPM方式
-
新建项目空白目录,并运行
npm init –y
命令,初始化包管理配置文件package.json-y 可以直接跳过配置
-
新建 src 源代码目录,并且把 bar.js 和 logic.js 和 main.js 文件复制到 src目录
-
创建index.html ,引用bundle.js
<!doctype html> <html><head> </head><body> <script src="dist/bundle.js"></script></body> </html>
-
运行
npm install webpack webpack-cli
命令,安装webpack相关的包如果全局安装过webpack 和 webpack-cli工具, 此步骤可跳过
-
在项目根目录中,创建名为webpack.config.js 的 webpack配置文件同上
var path = require("path"); module.exports = {mode: 'development', // mode 用来指定构建模式development、productionentry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'} };
mode: ‘development’ //mode 用来指定构建模式、production:生产模式(压缩)
-
在 package.json 配置文件中的scripts节点下,新增dev脚本如下:
{"name": "work4","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack" //script 节点下的脚本,可以通过 npm run 执行},"keywords": [],"author": "","license": "ISC" }
完整代码结构:
在终端中运行
npm run dev
命令,启动webpack进行项目打包。注意是在package.json 包下运行该命令
点击index.html文件查看结果, 会发现有内容输出:`Hello world!300
说明:使用npm命令运行的原因是后期使用webpack命令的时候,命令会很多,不仅仅只有webpack几个字母,不好记,而使用:npm run dev命令执行无论webpack命令有多少都会执行。
4 webpack-dev-server 开发服务器
4.1 介绍
修改main.js代码如下:
需要每次在修改源码之前需要重新打包:
每次修改代码, 都需要重新打包, 才能看到最新的效果, 且实际工作中, 打包非常费时 (30s - 60s) 之间
为什么费时?
- 构建依赖
- 读取对应的文件, 才能加载
- 用对应的 loader 进行处理
- 将处理完的内容, 写入到 dist 目录
简而言之就是我们希望修改源码完毕之后,不用再每次重新打包,运行的结果直接是修改后的结果。
解决方案:我们可以开启一个开发服务器webpack-dev-server, 在电脑内存中打包, 缓存一些已经打包过的内容, 只重新打包修改的文件 (热更新)
4.2 使用
如果模块(work3)下,没有package.json 文件,那么需要在模块下初始化命令:npm init即可
-
修改 package.json -> scripts 中的 dev, dependencies, devDependencies如下:
devDependencies这是开发时依赖, 上线不依赖
{"name": "work4","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server"},"keywords": [],"author": "","license": "ISC","dependencies": {"webpack": "^4.41.5","webpack-cli": "^3.3.12"},"devDependencies": { "webpack-dev-server": "^3.11.2"}
}
然后运行 cnpm install 指令,安装webpack,webpack-cli 和 webpack-dev-server
- 修改 webpack.config.js 文件,添加 devServer
var path = require("path");
module.exports = {mode: 'development', // mode 用来指定构建模式development、productionentry: './src/main.js',devServer: {port: 8099,// 服务器占用8099端口open: true // 自动打开浏览器},output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'}
};
-
删除之前的dist目录
-
将 index.html 中,script 脚本的引用路径
<!doctype html> <html><head> </head><body> <!-- 内存中读取 --><script src="/bundle.js"></script></body> </html>
-
运行 npm run dev 命令
-
在浏览器中访问 http://localhost:8099地址,查看自动打包效果
webpack-dev-server 会启动一个实时打包的 http 服务器
webpack-dev-server 打包生成的输出文件,默认放到了项目根目录中,基于内存