webpack 现代化前端最流行的一款 构建打包工具
前端构建打包工具的发展历史
- grunt
- gulp
- fis
- webpack
- .......
webpack 打包构建原理
基于某个入口文件，分析这个文件中的依赖。然后继续往下寻找依赖的依赖。循环往复，最后没有依赖了，把找到的全部都打包到一起。
webpack 核心
- entry (入口)
- output (出口)
- loaders (转换器) - webpack 将依赖都看成是一个一个的模块。但是默认情况只能识别 js与json 两种格式的模块。如果想要打包图片、样式等资源的话，就需要相应的loader转换器来进行转换操作，转换之后webpack才能识别。
- plugins (插件) - 有一些操作转换器也实现不了，这时就可以交给插件来实现。比如说要将某个文件直接复制到出口里面等操作。
- mode (打包模式 4.x 版本之后提供的) - 开发 | 生产
webpack 简单使用 (查看文档的指南部分)
- 创建 webpack-demo
- 初始化
- 装 webpack webpack-cli
运行 webpack 命令来打包
一、全局安装了 webpack 之后，可以直接在项目下使用 webpack 命令即可。
二、项目的本地安装
- ./node_modules/.bin/webpack
- 使用 npx webpack
- npm 脚本方式
默认的入口文件是： src/index.js
默认的出口文件是： dist/main.js
如果你的入口文件或出口文件不是默认的文件的话。
可以通过 --entry 选项来告诉它使用哪个入口文件
--output 选项来告诉它使用哪个出口文件
不推荐使用选项的方式来控制，推荐是用配置文件的方式：(webpack.config.js)
一、自动帮我们生成 dist / index.html
使用一款插件，html-webpack-plugin
- 安装插件
npm install --save-dev html-webpack-plugin
- 配置插件
plugins: [
new HtmlWebpackPlugin({
// 可以传递一个template选项，来控制使用哪个模板页面来生成
template: path.resolve(__dirname, './public/index.html')
})
]
二、将public文件夹里面的内容直接复制到dist文件夹中。
使用一款插件，copy-webpack-plugin
- 安装插件
npm install --save-dev copy-webpack-plugin
- 配置插件
plugins: [
new CopyWebpackPlugin([
{
// 将 public 文件夹中的文件内容，全部拷贝至 出口文件夹中
from: path.resolve(__dirname, './public')
}
])
]
三、引入css样式
需要两个转换器：style-loader | css-loader
css-loader: 将css文件转换成 webpack 能够识别的模块文件
style-loader: 将css写入到html页面的style标签中
- 安装需要的转换器
npm install -D style-loader css-loader
- 配置转换器规则
module: {
// 转换器的配置，规则
rules: [
{
test: /\.css$/,
// 多个转换器使用时，需要按照倒序的写法
use: ['style-loader', 'css-loader']
}
]
},
四、引入scss样式
除了 style-loader | css-loader 之外还需要 sass-loader | node-sass
五、引入less样式
除了 style-loader | css-loader 之外还需要 less-loader | less
六、引入图片
使用 url-loader 的转换器
