文章目录
1. webpack的使用
1.1 项目搭建基本思路
- 搭建项目的目录结构
- 使用 npm init 构建项目,使用 package.json 管理项目
- 编写 js 脚本
- 浏览器不认识 ES6 的高级语法，所以使用 webpack 打包 js 文件，将这个 js 文件转化成浏览器可以认识的文件
- 在 html 中引入打包好的js文件
npx 可以执行项目已经安装的可执行工具
1.2 webpack的安装
- 具体安装方式可参见 官方文档
npm i webpack webpack-cli -D
1.3 webpack 的默认配置
- 默认配置的入口文件是 src 目录。我们在 src 根目录下添加 index.js，就会默认打包这个 index.js 文件
- 默认出口文件在 dist 目录下生成 main.js
1.4 自定义配置文件
- 创建 webpack.config.js 的文件，放在项目的根目录
- 配置入口和出口，配置放在 module.exports** **导出的对象里
- 入口：entry 路径，这里用到的是 node 提供的 path 进行路径的拼接
出口：output 出口配置对象，path 打包输出目录，filename 打包输出文件名称
//webpack.config.js
const path = require('path');
module.exports = {
entry: path.join(__dirname, 'src/main.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
}
- 之后直接运行 webpack 即可打包
在 node 里 __dirname 是这个 js 的当前路径
1.5 执行webpack之后发生了什么
- 它会去项目的根目录里找 webpack.config.js 配置文件，如果没找到会使用默认的配置。默认的入口是src/index.js，默认的出口是 dist/main.js
- 回去找到配置文件配置的入口 entry 和出口 output
- 执行 webpack 打包命令，将入口文件转化成出口文件
1.6 配置多个入口
应用场景：
- 业务代码和第三方代码分离
- 多模块懒加载
如何配置：
- entry 之前是单个的地址，只能对应一个文件，entry 可以配置成一个对象，对象的 key 就是打包的入口文件起的名字，value 是文件对应的路径
- output 的 filename 改为 [name].js ，这里 [name] 指向就是配置的 key 的名字。
module.exports = {
entry: {
bundle: path.join(__dirname, 'src/main.js'),
index: path.join(__dirname, 'src/index.js')
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
}
}
2. 使用 webpack-dev-server 插件启动页面
每次修改之后都要重新打包，之后刷新页面，操作很繁琐，使用 webpack-dev-server 就可以解决这个问题，实现实时预览。
2.1 如何使用
- 安装 webpack-dev-server 依赖
npm i webpack-dev-server -D - 运行命令启动服务
npx webpack-dev-server - 可以配置在 package.json 文件中，配置之后通过
npm run【配置的名字】就可以启动
"scripts": {
"dev": "webpack-dev-server",
},
2.2 执行 webpack-dev-server 发生了什么
- 启动了一个服务，这个服务默认启动在8080端口
- 执行 webpack 命令，把输出的内容放在了内存里，我们直接通过 localhost:8080/【输出的文件名】就可以访问到这个文件
- 我们一修改入口文件，就会执行打包命令，界面就会进行刷新
为什么要放在内存里：我们文件一保存就会进行打包编译，会频繁涉及到文件的读写，内存的读写效率要比硬盘高很多，所以放在内存里
2.3 实现自动打开浏览器以及热更新
- 通过命令行指定参数的方式实现
webpack-dev-server --open --port 3000 --contentBase src --hot注意参数之间都有空格 - 使用配置文件配置 devServer
module.exports = {
..., // 省略了前面的内容
devServer: {
// --open --contentBase src --port 3000 --hot",
open: true, // 打开浏览器
contentBase: 'src', // 默认的界面
port: 3000, // 服务端口号
hot: true // 热部署，每次修改js文件只会打包修改的地方
}
}
2.4 html-webpack-plugin
- 安装 html-webpack-plugin
- 配置 html-webpack-plugin
plugins: [ // 配置插件的节点
new htmlWebpackPlugin({ // 创建一个 在内存中生成 HTML 页面的插件
template: path.join(__dirname, './src/index.html'), // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
filename: 'index.html' // 指定生成的页面的名称
})
],
生成的文件和之前文件的区别: 生成的文件里面会自动引入打包好的js文件
3. 解析 css 文件
- 在 main.js 中去引入写好的css，这里的引入方式和引入 js 是不同的
import【css文件的地址】 - webpack 默认只能处理 js 文件，如果遇到其他后缀，就会去配置文件中找处理的规、loader，规则配置如下：
module: { // 这个节点，用于配置所有第三方模块 加载器 loader
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的第三方loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
]
}
-
- 文件的处理顺序是从后向前进行处理
css 处理：css-loader style-loader
less 处理: less、less-loader
sass 处理: sass-loader、node-sass、sass
3.1 处理css中的地址问题
默认无法处理 css 文件中的 url 路径
- 安装 url-loader、file-loader
- loader传参， 配置limit，配置 name=[hash:8]-[name].[ext]
4. 处理图片数据
- 因为 webpack 不认识 .jpg 等结尾的资源，所以我们进行静态资源的处理
- 使用 url-loader、file-loader 处理图片数据
- 正则
/\.(jpg|png|gif|bmp)$/，url-loader 依赖 file-loader，所以我们只写了url-loader，配置如下：
{
test: /\.(jpg|png|gif|bmp|svg)$/,
use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]'
}
loader传参:
- 配置 limit 比这个配置文件小的图片会使用base64编码，比这个大的使用地址
- 配置 name=[hash:8]-[name].[ext] 使用地址的名字在这里配置:
- [hash:8]生成一个唯一的hash码这个hash码是32位，这里截取前8位
- [name]代表文件的名字
- [ext] 文件的扩展名
5. 处理字体文件
和静态资源类似，配置相应的解析规则就可以，这里也是使用 url-loader 进行的解析
{
test: /\.(woff|woff2|eot|ttf)$/,
use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]'
}
6. 翻译 JS 的高级语法 Babel
在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的 ES6 语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要借助于第三方的 loader，来帮助 webpack 处理这些高级的语法，当第三方 loader 把高级语法转为低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中。
- Babel 是一个 JavaScript 编译器
- 我们的目的是在低版本浏览器中也可以使用高级的语法。说白了就是为了兼容低版本浏览器，使用这个插件之后，会把高版本的语法转换成低版本的语法。转换规则在配置文件中配置的
例如：presets: [’@babel/preset-env’]
- 安装依赖，具体安装官网有介绍
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env - 添加loader的配置:
{
test: /\.js$/,
// 排除的部分，node_modules,1、没有必要2、node_modules特别大，打包比较慢
exclude: /(node_modules|bower_components)/,
// 使用数组和字符串配置，这里也可以使用对象配置，loader是js文件的处理模块，options是参数，里面参数的
// 内容是根据不同loader有不同的内容，这里presets是指定babel-loader预置的翻译语法
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
7. 使用 webpack 渲染 vue
7.1 使用传统方式进行运行
- 我们安装的 vue 默认导入的是运行时环境的 vue，在运行时环境中不支持直接使用 template 渲染，推荐使用 render 函数渲染
- 我们还想通过传统的方式渲染，我们可以导入完整的 vue 的 js，
import Vue from 'vue/dist/vue' - 这个导入什么包由 package.json 里的 main 属性配置的，我们不能修改 node_modules 里的内容。我们如果想修改 vue 导入时候的包的路径，可以修改 webpack 的配置。
resolve: {
alias: { // 修改 Vue 被导入时候的包的路径
"vue$": "vue/dist/vue.js"
}
}
7.2 使用webpack方式进行
- 在 webpack 中推荐使用 .vue 后缀的文件定义组件，安装 vue-loader、VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
7.3 图片引入问题
如果直接引入图片 <img src="../src/assets/img/0.jpg" alt />，控制台可能会报这样的错误
GET http://localhost:3000/src/assets/img/0.jpg 404 (Not Found)
这是因为 webpack 对 html 的处理不是特别的友好，需要借助官方提供的 html-loader 来处理：
{
test: /\.html$/,
use: ['html-loader']
}
如果出现下边的报错
GET http://localhost:3000/[objet%20Module] 404 (Not Found)
这是由 url-loader 的配置造成的，将 url-loader 的 esModule 置为 false 即可
{
test: /\.(jpg|png|gif|bmp|svg)$/,
use: [{
loader: 'url-loader',
options: {
esModule: false,
limit: 1024,
name: '[hash:8]-[name].[ext]'
// name: '[name].[ext]'
}
}]
}
1070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
