Webpack主要功能
- 转义代码（ES6转为ES5，SCSS转为CSS）
- 构建build
- 代码压缩
- 代码分析
学习webpack之前先定几个小目标，一步一步来
- 用webpack转义JS
- 理解文件名中hash的用途
- webpack生成HTML
- 用webpack引入CSS
- webpack引入SCSS
- webpack引入LESS和Stylus
- webpack引入图片
- 使用懒加载
对于webpack的文档需要选择性的看，而不是都看完
webpack安装
google搜索webpack getting start
按照命令抄
webpack可全局安装也可安装在项目下
我安装在项目下,并且指定版本号
npm install webpack@4 webpack-cli@3 --dev
或者
yarn add webpack@4 webpack-cli@3 --dev
目标一webpack转义JS
接下建一个src目录，src里创建index.js
然后尝试用webpack转义这个js文件
npx webpack //webpack安装在项目下，使用npx，npx会在项目里寻找webpack工具，如果npx失效了可以这么找
./node_modules/.bin/webpack //这样运行webpack
我们多了一个dist目录，里面就是webpack生成的文件
控制台出现警告，使用google搜索webpack configuration mode,找到官网内容
在概念那里的configuration
需要创建webpack.config.js文件，写入以下代码，将./foo.js改为目录下的index.js,运行webpack
var path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'foo.bundle.js'
}
};
发现dist目录生成的foo.bundle.js是output里的filename，可以将其改为[name].js再运行webpack，再dist目录得到一个main.js的文件
完成webpack转义js
理解文件名中hash的用途
让打包的文件附带一个hash, 如下
运webpack，结果看main的文件名
为什么要设置成这样
涉及到HTTP缓存---在HTTP响应头中的cache-control可以看到是否使用了HTTP缓存
比如在第一次访问baidu.com, 百度返回几个文件index.html, 1.css, 2.css, 1.js, 2.js, 我们将1.css， 2.css， 1.js，2.js放入缓存或者硬盘中，设置好过期时间。
在第二次访问baidu.com时，只需要下载index.html, 其他文件从内存或者磁盘中获取。
那么这些存入缓存或者磁盘中的文件如何更新，
根据文件名进行更新，如果下载的index.html里引用css，js的文件名与之前存好的文件名不一样，就会进行从新下载这些文件进行更新。
文件名附带hash可以很方便的使文件名不重复，同时解决了文件命名的问题。
webpack生成HTML
google搜索 webpack html, 找到了一HtmlWebpackPlugin，安装
yarn add html-webpack-plugin --dev
或者
npm install html-webpack-plugin --dev
引入
/*webpack.config.js*/
var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js'
},
plugins: [new HtmlWebpackPlugin()]
}
运行webpack，在dist里就生成了一个html页面
如果要使用自己的规定的html文件，如下配置
先建个自己的html
<!--src/assest/test.html-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<div id="app1"></div>
</body>
</html>
然后配置,运行webpack看看效果
用webpack引入CSS
google搜索webpack css loader
按照文档，安装，写css，然后引入，好像还需要一个style-loader安装一下，就可以了
使用webpack-dev-server
生成了html文件，那应该如何预览，需要webpack-dev-server,google搜索一下这个，找到其官方文档
安装
yarn add webpack-dev-server --dev
在package.json写入"start":"webpack-dev-server"
然后可以yarn start运行
webpack引入SCSS
先准备一个scss文件
/* src/y.scss */
body{
background: yellow;
}
然后 index.js里引入
import './y.scss'
需要安装sass-loader 和 dart-sass，不推荐使用node-sass
yarn add sass-loader dart-sass --dev
webpack有时会使用node-sass，如何换成dart-sass
/*webpack.config.js 里的module.rules下*/
{
test: /\.scss$/i,
use: [
// 将 JS 字符串生成为 style 节点
"style-loader",
// 将 CSS 转化成 CommonJS 模块
"css-loader",
// 将 Sass 编译成 CSS
{
loader: "sass-loader",
options: {
implementation: require('dart-sass') //使用dart-sass
}
},
]
},
webpack引入LESS和Stylus
引入less和stylus也是和引入scss一样，只是所安装的loader不一样
webpack引入图片
准备好一张图片，如图
在index.js里引入图片，然后把它加到元素里
使用到的loader是file-loader，简单使用
{
test: /\.(png|jpe?g|gif)$/i,
use: [{
loader: 'file-loader',
}],
},
运行即可
使用懒加载
准备一个lazy.js
/* src/lazy.js */
export default function lazy(){
console..log('我是一个懒加载模块')
}
/* src/index.js */
const button = document.createElement('button')
button.innerText = '懒加载'
button.onclick = () => {
const promise = import('./lazy')
promise.then(module => {
console.log(module)
const fn = module.default
fn()
}, () => {
console.log('模块加载错误')
})
}
app1.append(button)
即可，效果是，点击按钮后控制台打印出'我是一个懒加载模块'
