Wepack 基本概念
为什么要使用 Webpack?
- 现在跟多浏览器不支持 ed6、ed7、esnext 等更高级的语法,但是这些语法又比较好用,使用 webpack 可以帮我们把新语法转换成 es5的语法;可以支持老浏览器;
代码编译工具
- 模块化开发
它会把你写的每一个 js 编译成一个闭包;
它可以把所有的文件当做模块来处理 - 打包编译成 html css js等其他资源文件;
模块化开发的好处
- 方便维护
- 保护源代码
Webpack 中文网
Webpack 起步
安装
- 命令行 cd 到项目文件夹
PS C:\Users\Administrator\Desktop\mi\test\练习14\webpack-demo>
- 安装命令行
> npm i -g webpack
> npm i -g webpack-cli
> npm i -g webpack-dev-server
# 说明:
# webpack 用来编译生产的
# webpack-cli 命令行工具
# webpack-dev-server 帮你创建一个开发服务器 带热更新的功能
# 检查安装是否成功
> webpack -v
4.32.2
配置
- 创建编译配置文件
webpack.config.js
配置文件是用来协助 webpack 知道编译哪些文件,编译成什么样子的文件;
这个文件中的内容;(nodejs 模块化中,暴露一个模块的写法;)
module.exports = {
// ... webpack 的配置
}
- 在命令行执行
webpack
命令,会直接调用webpack.config.js
这个文件
> webpack
- 配置选项
1)entry:入口配置
2)output:输出目录
3)mode: 编译模式(development
开发模式)(production
生产模式)
// 引入 path模块
const path = require('path')
module.exports = {
// 入口配置
entry: path.resolve('src', 'index.js'),
// 输出目录
output: {
path: path.resolve('dist'),
filename: 'app.js',
},
// 编译模式
mode: 'development'
}
- 在配置文件指定的输出目录
dist
下新建index.html
文件,在这个html
文件中引入输出配置中指定的js
文件;
<script src="./app.js"></script>
- 然后就可以在
src/index.js
里写js代码,然后执行webpack
命令编译到dirt/app.js
之后,引用app.js
文件了;
编译非 js文件
由于webpack 自身只理解 JavaScript,当我们在 .js
文件中引入了其他类型的文件,如 .css
文件,会报错,这时就需要我们配置一下 loader
选项。
loader
同样是 webpack.config-js
文件中的配置项;
- 在
webpack.config.js
文件中新建module
选项;用来解析模块的配置;
在 webpack 中,所有的文件都会被当做模块来处理;
不同的模块需要不同的处理器来处理,处理器的概念叫 loader,即加载器;
module: {
},
- 定制加载器的处理规则
一个正则表达式配一个加载器
test
选项是正则表达式,如下:匹配所有的以.css
结尾的文件,只要是以.css
结束的文件,都用这里这个加载器来处理;
use
选项里是加载器;
module: {
rules: [
{
test: /\.css$/,
// 多个加载器用字符串数组,单个加载器用字符串;
use: ['style-loader', 'css-loader'],
},
]
},
处理 css 的加载器有:
- style-loader 样式加载器,用于把编译好的样式 自动添加到 dom中;
- css-loader 用来编译 css 的;
处理 less 的加载器有:
- style-loader 样式加载器,用于把编译好的样式 自动添加到 dom中;
- css-loader 用来编译 css 的;
- less-loader 用来编译 less 的;
- 安装 loader
loader 不是 webpack自带的,需要单独安装;安装到项目里,不是全局安装
webpack 会自动在项目的 node_modules 目录里找那个模块
# 生成 package.json 和 package-lock.json 文件
> npm init --yes
# 安装
> npm i style-loader css-loader
webpack-dev-server 的使用
- 安装插件
html-webpack-plugin
这是个 webpack 的插件
这个插件,允许你添加一个模板,然后他自动把编译好的 js 和 css 添加到你的页面里;
> npm i html-webpack-plugin
- 使用插件:
在webpack.config.js
配置文件中
// [1] 导入 html-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
// [2] 添加 html 模板模块
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('public', 'index.html');
})
],
// [3] 配置开发服务器
devServer: {
// 端口号
port: '8088'
}
// ...
}
- 安装 webpack-dev-server
> npm i -g webpack-dev-server
# 在本地安装一下 webpack
> npm i webpack
- 启动项目
> webpack-dev-server
- 访问地址
webpack 初识就到此为止;
webpack 中文网的文档还是比较详细的,后续学习可以看文档的;