webpack
webpack基本概念
-
webpack的作用
- vue-cli实现底层的原理
- 可以运行为一个服务器
- 可以进行实时更新
- 代码修改后,保存,页面会自动更新
- 可以解析 css文件 .vue 文件
- vue-cli实现底层的原理
-
准备工作
任务:使用webpack搭建一个类似与vue-vli搭建的项目结构
-
概念
作用:用来打包资源
- 表
- 样式
- 脚本
- 图片
打包流程:
模块化的项目,以一个
js
文件为入口,分别导入其它的文件(.js,图片, 样式…)形成了一个模块化的项目。webpack 可以将这个模块化的模块进行打包,将 js & 样式 & 图片进行打包,打包之后可以直接运行在浏览器上。
webpack使用
-
1.初始化项目(生成
package.json
文件)-
npm init -y
-
-
2.安装webpack
npm install --save-dev webpack@4.44.2 // 安装 webpack npm install --save-dev webpack-cli@3.3.12 // 安装 webpack 的 cli
-
3.配置
package.json
{ "scripts": { "start": "webpack ./要打包的文件名" } }
-
4.打包
npm run start
-
5.修改导入路径
- 将index.html中导入的js替换为dist目录中的js
注意点:
-
下载第三方包时不成功:
将下载的工具npm改为cnpm
-
下载直接报错:
不要将文件夹的名称取名为:
webpack
npm-run的使用
npm run start
: 会去当前运行的目录下找package.json
中的script的start指令并执行
配置文件
步骤:
-
1.0 在项目的根目录创建一个文件名为:
webpack.config.js
-
2.0 在配置文件中添加代码
const path = require('path'); module.exports = { entry: './src/main.js', };
-
3.0 配置
package.json
文件{ "scripts": { "start": "webpack --config webpack.config.js" } }
-
4.0 删除
dist
目录 -
5.0 重新打包
配置项
配置项-入口
loader
loader-作用
- webpack 默认只能打包 js 文件,无法打包其它文件(样式,字体,图片)。如果想要打包其它的文件,可以借助 webpack 中的 loader 来进行打包。
特点:
- 所有的 loader 都是第三方包,可以帮助 webpack 打包其它资源
- 不同的 loader 打包的文件是不一样的
loader - style-loader&css-loader
步骤:
-
1.0安装打包css的loader
npm install --save-dev style-loader css-loader
-
2.0配置Loader(webpack.sonfig.js)
module.exports = { entry: '', output: {}, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', // 将样式使用到页面中 'css-loader' // 将样式打包到 dist 目录下 ] } ] } }
-
3.0重新打包
npm run start
loader - less-loader
在写项目时,一般会使用 less 语法来书写样式。less 如果需要打包要借助第三方包: less-loader
使用less
- 在
style
中创建一个less.less - 添加less的样式
- 在
src/index.js
中导入这个less
打包less步骤:
-
1.0 安装第三方包
npm install --save-dev less-loader less
-
2.0 配置loader (webpack.config.js 中完成的)
module.export = { module: { rules: [{ test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }] } }
-
3.0 重新打包
loader - sass-loader
用来打包 sass 文件的
使用 sass 文件:
- 创建一个 sass 文件(注意点:所有的 sass 文件为了防止跟其它文件冲突,后缀名统一写为
.scss
) - 完成 sass 的代码
- 在
index.js
中使用
打包 sass 的步骤:
- 1.0 下载第三方包
- 2.0 配置第三方包
- 3.0 重新打包
loader - file-loader
打包图片:
- 使用图片
- 在 html 中添加一个容器
- 给容器设置样式:设置一个背景图片
- 打包图片:
- 1.0 下载第三方包
- 2.0 配置第三方包
- 3.0 重新打包
- 注意点:
- 1.0 会将图片打包到 dist 目录下
- 2.0 将静态文件:
public/index.html
拷贝到dist
目录下- 导入 的
js
文件的路径也要做相应的修改
- 导入 的
打包字体:
- 使用字体(使用 bootstrap 中的字体文件)
- 下载 bootstrap (版本号:3.3.7)
- 导入 bootstrap 的样式
- 使用字体图标
- 打包字体:
- 1.0 下载第三方包
- 2.0 配置第三方包
- 3.0 重新打包
loader - babel-loader
将 es6 语法打包为 es5 语法
打包 es6 为 es5
-
1.0 下载第三方包
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev
-
2.0 配置第三方包
module: { rules: [ { test: /\.js$/, // 将后缀名为 js 的文件进行 es6 转 es5 的处理 exclude: /node_modules/, // 处理的目录不包括 node_modules use: { loader: 'babel-loader', // 使用 babel-loader 来处理 options: { presets: ['@babel/preset-env'] // 固定写法 } } } ] }
-
3.0 重新打包
注意点:
- 最新的 webpack 已经放弃了 ie 浏览器(不会再将 es6 转 es5,所以如果要上述的代码起作用,应该将 webpack 的版本降级为 4.x)
插件
插件 - HtmlWebpackPlugin
修改内容之后,重新打包好 dist 目录下的内容之后,还需要将 index.html 从pulibc
下拷贝到 dist 目录下,太麻烦了。
作用:可以在 dist 目录中自动生成一个 html 文件
使用步骤:
-
1.0 下载插件
npm install --save-dev html-webpack-plugin
-
2.0 配置插件(webpack.config.js 中完成的)
// 导入插件 const HtmlWebpackPlugin = require('html-webpack-plugin') // 配置插件 module.exports = { plugins: [ new HtmlWebpackPlugin({ filename: '', // 生成的静态文件名称 template: '' // 以谁为模板生成的静态页面 }) ] }
-
3.0 重新打包:
npm run start
注意点:
-
自动生成的 html 文件有以下特点:
-
会自动将模板中的内容全部复制一份
-
会自动在文件的末尾添加入口文件的引用
<script src="main.js"></script>
-
-
插件 - clean-webpack-plugin
作用:用来清除 dist 目录
步骤:
-
1.0 下载插件
npm install clean-webpack-plugin --save-dev
-
2.0 配置插件
// 导入插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 配置插件 module.exports = { plugins: [ new CleanWebpackPlugin() ] }
-
3.0 重新打包
插件 - webpack-dev-server
作用:可以开启一个服务器,具有实时更新的功能
步骤:
-
1.0 下载插件
npm install --save-dev webpack-dev-server
-
2.0 配置插件(webpack.config.js)
module.exports = { devServer: { contentBase: './dist' }, }
-
3.0 配置指令:(package.json)
{ "scripts": { "start": "webpack --config webpack.config.js", "serve": "webpack-dev-server --open" } }
-
4.0 开启服务器:
npm run serve
注意点:
- 开启服务器之后,修改完代码之后是不需要自己重新打包, 手动刷新页面的(服务器可以做到时实更新)
- webpack-dev-server插件在使用时,默认使用的默认文件的名称为:
webpack.config.js