前言
简介:webpack是node的第三方模块包,用于打包代码,缩小项目体积,提高项目加载速度,很好的解决了项目中的每一个请求都要消耗资源和时间的问题。同时能够完成语法降级(es6->es5),解决部分浏览器不支持新语法的问题,但是程序员又觉得es6很香的问题。基于yarn包管理工具和es6模块化语法1,本文介绍了webpack的使用方法。
一、yarn包管理工具
yarn包管理工具,是npm的升级版,下载速度比npm快上很多,打包代码的时候,更推荐使用yarn,体验更好。
- 在node环境中安装yarn管理工具
npm install -g yarn
- 检查yarn版本
yarn -v
- 初始化包环境,生成package.json,用来记录下载的包名和版本号
yarn init
- 添加包 指定版本的包
yarn add [package]
yarn add [package]@version
- 移除包
yarn remove [package]
- 安装项目全部依赖(一般拿到别人的项目时,缺少node_modules,会根据package.json记录的包名和版本全部下载到当前的项目中)
yarn
- 全局安装 卸载 【注意: global一定在add左边】
yarn global add [package]
yarn global remove [package]
二、webpack
1.webpack的基本概念
- webpack本身是node的一个第三方模块包,用来打包代码。
- javascript应用程序的静态模块打包工具。
- webpack作用:①打包整合项目文件,缩小项目体积,提高加载速度。②也能够实现语法降级,webpack打包之后es6/7/8会降到es5。③支持vue单页面程序。
2.webpack的使用步骤
2.1webpack的基本使用
【演示】:将项目文件夹下的src文件夹中的两个js文件合并到1个js文件中,并输出到dist文件中。
【目录结构说明】:
./dist文件夹用来存放分发代码,分发代码是指在构建过程中,经过最小化和优化后产生的输出结果,最终将在浏览器中加载。
.src文件夹用来存放源代码。
【webpack默认出入口】:
默认入口: ./src/index.js
默认出口: ./dist/main.js
注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名。
【初始代码环境准备】:
1.在项目文件夹下新建src目录,新建hello/hello.js,导出
export const sayHI = ()=>{console.log('hello');}
2.新建src/index.js,导入sayHI方法
impprt {sayHI } from ‘./hello/hello.js’;
sayHI();
【webpack打包工具使用】:
- 初始化包环境
yarn init
- 安装webpack模块包
yarn add webpack webpack-cli -D
- 配置package.json文件(自定义命令,用于将webpack命令替换为bulid,设置之后运行yarn build 就相当于运行 yarn webpack)
“script”:{ "build":"wepack"}
- 运行命令,打包文件
yarn build
- 如果源代码发生改变,更新打包
yarn bulid
【演示测试】:
demo的结果的是将两个js文件输出为一个,直接查看dist文件夹下生成的js文件即可。
【webpack打包后的包的使用方法】:
将打包后的js文件,手动引入index.html文件中,运行查看结果。
<script src="../dist/index.js"></script>
注意:推荐将scrip标签放到head标签中,放到body标签中的话,如果之后需要操作dom元素添加到body中容易出错。
2.2webpack的配置
1.入口和出口的文件的配置
【配置package】:根目录新建webpack.config.js(默认配置文件名):
//导入node的内置路径模块
const path = require("path");
//导出配置信息
module.exports = {
entry: "./src/main.js", // 入口
output: {
path: path.join(__dirname, "dist"), // 出口路径
filename: "bundle.js" // 出口文件名
}
};
【yarn build执行流程】:
重点: 所有要被打包的资源都要跟入口文件产生直接/间接的引用关系
2. 打包自动生成html文件
使用 html-webpack-plugin 插件,在dist文件夹中自动生成html文件
- 安装插件
yarn add html-webpack-plugin -D
- 配置webpack.config.js文件
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...省略其他代码
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html' // 以此为基准生成打包后html文件
})
]
}
3 加载器–加载除js文件其他类型的文件
引入loaders的原因:webpack默认只能处理js文件
loaders
style-loader
css-losder
【以加载css文件为例说明使用步骤】:
1.下载css-losder yarn add css-loader style-loader -D
2.配置webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/, //处理.css结尾的文件
use: [ 'style-loader', 'css-loader' ] //使用这两个加载器
}
]
}
}
【常用加载器】:
3.webpack开发服务器
启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问。
1.监控项目源代码
2.一旦监听到源代码发生改变,会自动编译,并保存。
1.下载包:yarn add webpack-dev-server -D
2.配置package.json
scripts: {
"build": "webpack",
"serve": "webpack serve"
}
3.启动webpack服务器 yarn serve
4.服务器端口号配置
module.exports = {
// ...其他配置
devServer: {
port: 10110 // 端口号
}
}
ES6规范:导出
export
或者export default {}
;导入import 变量名 from '模块标识'
↩︎