Webpack入门
安装配置
npm i webpack webpack-cli --save-dev
npm
npm i xxx --save
npm i xxx --save-dev
--save 会把依赖包名称添加到 package.json 文件 dependencies 键下
--save-dev 则添加到 package.json 文件 devDependencies 键下
dependencies是运行时的依赖
devDependencies是开发时的依赖
** Yarn**
yarn add jquery
// 表示通过“运行依赖”方式安装jquery后边没有参数，运行依赖也有参数，为--save 简称 为 -S，但是可以不用设置
yarn add webpack -D
// webpack后边有-D参数，表示通过“开发依赖”方式安装 开发依赖参数为 --save-dev 简称为 -D
案例
在根目录下创建src文件夹，其中一个是入口文件app.js，一个是写内容的work.js。入口文件用来引入真正写页面 的JS文件、CSS文件。
work.js
document.write('铁蛋儿真帅')
app.js
let dt = require('./work.js')
然后，再返回上一层目录，新建index.html文件（该文件和src属于同一层级）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div>test</div>
<script src='./dist/main.js'></script>
</body>
</html>
在命令行中执行
webpack app.js
配置打包模式
配置入口和出口文件
配置快速启动项package.json
"scripts": {
"build": "webpack"
},
给webpack.config.js做如下配置
// webpack中引入其他的模块要使用commonJS模块化require导入 因为webapck是nodeJS开发的 不能使用 import导入
const ph = require('path')
module.exports = {
mode: 'development',
entry: ph.resolve('./src/app.js'), // 绝对路劲
output: {
path: ph.resolve('./dist'), // 配置出口目录
filename: "main.js" // 配置出口文件名称
}
}
打包 npm run build
编译模板页面
webpack有一个插件，可以实现同时打包/(复制)index.html到达dist目录，并自动就引入main.js文件，我们要做到 的事情就是直接运行打包好的模板文件即可
**安装工具 **
yarn add html-webpack-plugin -D
在webpack.config.js中配置如下信息
在index.html模板中不用引入任何的js文件了
做物理打包 npm run build（编译生成模板文件了，并且有自动引入main.js文件）
实时打包
项目开发都是对src目录内部的文件进行更新，不要去修改dist打包好的文件
现在对src内部的任何文件做修改操作后，都需要重新打包，才可以看到对应效果
webpack本身有一个工具，名称为 webpack-dev-server，可以实现随时修改源文件，浏览器随时看到修改后的效 果，不需要反复打包，这样就非常好。 webpack-dev-server安装运行起来之后，会给我们创建一个http的web服务
**安装 **
yarn add webpack-dev-server
webpack.config.js中做如下配置
在package.json中做如下配置
通过 npm run serve 就可以实现 实时打包、实时编译、实时浏览器查看效果了
运行css文件
loader
webpack本身就是一个打包机器，其不能对具体代码内容部分进行处理(或处理得非常有限)，不同的代码内容 (less/scss/ES6(ES7)/image/css等等)需要webpack找到不同的loader(装载器)实现转码、编译、降级处理。
安装配置css相关loader
css内容相关的loader有：style-loader 和 css-loader
安装
yarn add css-loader style-loader -D
** 在webpack.config.js中做如下配置(注意use的顺序一定是如下)**
现在重新 实时打包 npm run serve发现 css文件的样式已经生效
引入背景图片应用
img图片相关的loader有两个：url-loader 和 file-loader
安装
yarn add url-loader file-loader -D
webpack.config.js中做具体配置
{
// 图片处理loader配置
test: /\.(png|jpg|gif)$/i, // 正则匹配图片文件
// 遇到图片文件就交给如下loader处理
use: [
{
loader: 'url-loader',
options: {
// limit:设定大小阀值
// a. 被处理图片大小 大于该阀值，就通过物理文件重新生成该图片
// b. 被处理图片大小 小于等于该阀值，就把图片变为字符串(嵌入到应用文档中，好处是节省一个http资 源)
limit: 8192,
// 做配置，使得生成的物理图片被存储在dist/images里边
outputPath: "images",
}
}
]
},
url-loader: 负责把大小小于等于阀值的图片变为字符串
file-loader: 负责把大小 大于阀值的图片重新以物理文件形成生成在dist目录
应用less文件
安装依赖包
yarn add less-loader less -D
webpack.config.js做如下配置
{
//less处理loader配置
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"]
}
less样式文件处理需要3个loader，具体为上述，它们有严格的顺序，它们有做工作交接
它们执行的顺序是颠倒的(less>css>style)
style-loader：负责生成style标签，把css样式体现出来，之后该标签嵌入到应用文档中去 css-loader：使得css文件可以通过import引入，并合并到main.js中
less-loader: 该loader负责把less文件内容转变为 css内容
现在在重新实时打包运行 npm run serve，发现less设置样式已经生效
运行es6标准代码
在work.js中应用es6内容(let、箭头函数、对象解构赋值、…展开运算符等等)
// 对es6高级内容做应用
let age = 18
let getShuai = ()=>{
return '铁蛋儿'
}
**给项目做物理打包 **
npm run build
发现情况不好，在main.js中生成的内容还是es6高级的信息
能够把es6高级内容变为es5的loader名称为 babel-loader
babel-loader官网*
** 安装依赖包*
yarn add babel-loader @babel/core @babel/preset-env -D
在webpack.config.js中做如下配置
在项目根目录创建 babel.config.js文件，配置如下，使得babel-loader可以找到preset做代码降级处理
现在给项目做物理打包 npm run build,发现高级内容已经降级处理了
8786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
