今天学习webpack，虽然只学了很基础的部分，但是我觉得有必要记下来，配置也挺折腾的。
1.webpack的优点
- webpack能够处理js文件的相互依赖关系，将所有小文件打包成一个或多个大文件
- webpack能够处理js的兼容性 能够将高级浏览器不识别的语法 转换成低级浏览器能够识别的语法
2.开始配置
2.1 建项目基本目录
index.html中调用main.js ，引入css等文件，会使加载速度变慢，所以要用webpack
将所有的资源加载，导包等全放入入口文件 main.js文件。
现在从头开始，像平常一样写：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="main.js"></script> 记住这里
</head>
下面配置后开始转换写法
2.2 初始化package.json文件
npm init
2.3 安装webpack
npm install webpack --save
npm install webpack-cli --save
2.4 尝试webpack打包文件
终端运行 命令
webpack .\src\main.js --output .\dist\bundle.js
将main.js 打包的资源放在 bundle.js文件中，则在dist 目录下会自动生成一个bundle.js 文件。
此时 引入文件也就改变啦，index.html文件应该引入打包后的js文件，可以提高加载速度
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../dist/bundle.js"></script> 记住这里
</head>
注意：这样写法很繁琐，可以直接进行下面这步，直接写入配置文件，更清晰
2.5 配置 webpack.config.js
- 入口entry / 出口 output文件
const path = require('path');
module.exports ={
entry:path.join(__dirname,'./src/main.js'),
output: {
path:path.join(__dirname,'./dist'), //指定哪个目录 打包哪个文件
filename: "bundle.js" // 指定住处文件名
}
};
配置好文件，终端输入命令
webpack即可 看到如下结果
image.png
上面方法，每次修改文件都需要输入 webpack 太麻烦，现在 可以安装自动打包编译的工具
2.6 配置 webpack-dev-server 自动打包编译工具
npm install webpack-dev-server -D
webpack-dev-server 会帮忙打包生成 bundle.js文件，所以引入js文件方式又变了
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/bundle.js"></script> 记住这里
</head>
为什么可以直接在根目录下引用呢？
webpack-dev-server 会帮忙打包生成的bundle.js文件，但没有存放到 实际的物理磁盘dist上，而是直接托管到 电脑内存中，所以在我们项目的根目录底下，根本找不到打包好的 bundle.js， 所以引入文件的时候得引根目录下面的虚拟bundle.js文件(有点绕)。
目的就是快，因为内存的运行速度比物理磁盘快
2.7 配置 package.json 文件 实现自动编译
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server" 加上这句
},
然后每次终端输入npm run dev就可以运行了，点击终端给的 http://localhost:8080就可以看到自己内容
2.8 设置自动编译的自启服务的方法：
1. 全部配置到 webpack.config.js文件
devServer: {
open:true,
port:3030,
contentBase:'src',
hot:true
}
或者：配置到package.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3030 --contentBase src --hot",
},
输入
npm run dev可以直接运行，到你需要的页面，
参数：
--port ：是默认自动打开浏览器
--port 3030：是修改服务器的端口号为 3030
--contentBase src ：是自动定位，打开src底下的 index.html 文件
--hot： 实现网页异步加载 不刷新
2.9 webpack.config.js 中配置在内存中生成html页面的插件，将html页面也存储到内存上
- 安装
npm install html-webpack-plugin -D
2.配置：plugins
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports ={
......
plugins: [
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'), //指定模板文件路径
filename: 'index.html' //设置生成的内存页面存储名称
})
],
}
注意：配置 在内存页生成面 的 plugins
优点：
1. 自动在内存中根据指定的页面生成一个内存页面
2. 自动 把打包好的 bundle.js 追加到页面中 不需要在页面中引入 bundle.js文件了
<head>
<meta charset="UTF-8">
<title>Title</title>
无需再调用
</head>
然后运行 npm run dev就可以实现基本的加载了
2.10 配置第三方模块 各种loader （例如:css /img /font）
原因：webpack 默认只能打包js类型的文件， 无法处理其他类型的文件
若要处理非js文件 需要手动安装第三方的加载器 安装各种需要的loader:
module:{
rules:[
{test:' 正则匹配'，use:[ 使用的安装的模块]
]
}
-
加载css 文件
npm install style-loader css-loader -D{ test:/\.css$/, use:['style-loader', 'css-loader']}
-
加载img
- 默认情况下：webpack不能处理css中的URl地址，不管是图片，还是字体
需要导入url-loader file-loader，要在webpack.config.js中配置 module
图片会自动转换成base64编码 npm install url-loader file-loader -D{ test:/\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=99948&name=[hash:8]-[name].[ext]'}- limit给定的值是图片大小, 单位是type,如果我们引用的图片大于等于 limit则会转换为base64 但小于则不会转换成base64
- name=[name].[ext] 设置编译后不自动分配名字, 保持原来图片的名字
- 默认情况下：webpack不能处理css中的URl地址，不管是图片，还是字体
-
加载字体
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}
第三方模块加载器
module:{
//第三方模块 匹配规则
rules: [
//test的值是正则表达式匹配
//use:配置处理应用多个 loader 和选项 从后往前匹配
css文件匹配处理
{ test:/\.css$/,use:['style-loader', 'css-loader']}，
处理图片路径的loader
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=99948&name=[hash:8]-[name].[ext]'},
处理字体的loader
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}
]
}
最后看下：main.js 文件内容：
入口文件中引入资源的方法：
- js包: import $ from '包名'
css文件： import '路径'
主要是包及文件导入的方法
看下结果：
注意运行的是本地服务器地址
3.总结
- npm init
- npm i webpack --save
- npm i webpack-cli --save
- 配置 webpack.config.js 中入口entry /出口 output 文件
- npm i webpack-dev-server -D
- 配置 webpack.config.js 中的服务运行 devServer
- npm i html-webpack-plugin -D 导入在内存中生成HTML页面的插件
- 配置 webpack.config.js 中 在内存页生成面 的 plugin 优点 页面无需调用 bundle.js
- 运行 npm run dev 基本的js+html 就可以渲染加载了
- 10.配置第三方模块 各种loader
- eg:css，less文件加载
- (1) 创建 index.css文件
- (2) npm install style-loader css-loader -D
- (3) 配置 webpack.config.js 文件中的 module模块 中的rules 级第三方模块的匹配规则
- 11.完成基本操作
配置完上面这些 ，那基本的 html、css、js就可以结合在一起啦，输入命令npm run dev，就可以看到效果啦。其实配置一步步还挺复杂的。因为第一次会出各种各样的问题，还是要总结，虽然可能用的比这个更多更难，但是一切都应该有个扎实的开始。
加油！！！
网友评论