- webpack的基本使用:
1.在终端输入 npm/cnpm i webpack webpack-cli 安装webpack相关的包
2.在项目的根目录中 创建 webpack.config.js 文件
3.在配置文件中 初始化下列配置
module.exports = {
// mode属性 用来指定构建模式
// development 设置为开发模式 不会进行压缩与混淆 打包速度稍快
// production 发布模式 进行压缩与混淆 打包速度稍慢
mode: "development"
}
4. 在 package.json配置文件中的script节点中 xinzeng " dev " 脚本
"dev": "webpack" // script节点下的脚本，可以通过npm run 来执行
5.在终端运行npm run dev命令 对webpack项目进行打包构建
- webpack 的手动配置
- webpack 从 4.x 版本规定 打包入口文件是 src -> index.js
- 打包输出文件是 dist -> main.js
要想手动修改的话，需要在 webpack.config.js 配置文件中添加
// 配置打包入口文件的路径
entry: path.join(__dirname, "src", "index.js"),
// 配置输出文件的存放路径
output: {
// 输出文件的存放路径
path: path.join(__dirname, "dist"),
// 输出文件的名称
filename: "bunble.js"
}
- 配置 webpack 的自动打包功能
1. 安装项目自动打包工具 npm i webpack-dev-server
2. 修改 package.json 配置文件中 script 中的 dev 命令
"dev": "webpack-dev-server" // 使用 webpack的自动打包工具
3. 将 src -> index.html 中的script 脚本的引用路径改为 /bunble.js
4. 输入 npm run dev 重新进行打包
5. 在浏览器中访问 <http://localhost:8080> 地址，来查看自动打包效果
- 配置 html-webpack-plugin 生成预览页面
1. 安装生成预览页面的插件 npm i html-webpack-plugin
2. 在 webpack.config.js 文件中配置
const HtmlWebpackPlugin = require("html-webpack-plugin") // 导包
// 创建实例对象
const htmlPlugin = new HtmlWebpackPlugin({
// 设置生成预览页面的模板文件
template: "./src/index.html",
// 设置生成预览页面的名称
filename: "index.html"
3. 在向外暴露配置对象中 新增配置节点
// plugins数组时webpack打包期间会使用到的插件列表
plugins: [htmlPlugin]
注意： 因为使用的是 webpack 4.x 版本 所以插件要使用 4.x.x 版本
-
配置自动打包相关参数
在 package.json 配置文件中配置
// --open 打包完成以后自动打开浏览器页面 // --host 配置ip地址 // --port 配置端口号 "scripts": { "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999" }, -
打包处理 css 文件
1. 在终端输入 npm i style-loader css-loader
2. 在 webpack.config.js 配置文件中 添加 module 属性 -> rules 属性 属性值是数组 在数组中添加 loader 规则
// plugins数组是webpack打包期间会使用到的插件列表
module:{
// rules数组是用于配置loader 规则列表
rules:[
{
// test 表示匹配的文件类型
// test: /\.css$/,
// use 表示对应要调用的loader
use: ["style-loader", "css-loader"]
}
]
}
- 在 index.js 中直接导入 css 文件
注意： - use 数组中指定的 loader 顺序是固定的 - 多个 loader 的调用顺序是从后往前调用
- 打包处理 less 文件
1. 在终端输入 npm i style-loader css-loader less-loder
2. 在 webpack.config.js 配置文件中 添加 module 属性 -> rules 属性 属性值是数组 在数组中添加 loader 规则
// plugins数组是webpack打包期间会使用到的插件列表
module:{
// rules数组是用于配置loader 规则列表
rules:[
{
// test 表示匹配的文件类型
// test: /\.less$/,
// use 表示对应要调用的loader
use: ["style-loader", "css-loader","less-loader"]
}
]
}
- 在 index.js 中直接导入 less 文件
- 配置 postcss 自动添加 css 的兼容前缀 (-ie- -webkit-等前缀 )
1. 在终端输入 npm i post-loader autoprefixer
2. 在项目目录中创建 postcss 的配置文件 postcss.config.js 并进行配置
// 导入自动添加前缀的插件
const autoprefixer = require("autoprefixer")
module.exports = {
// 配置插件
plugins: [autoprefixer]
}
- 在 webpack.config.js 配置文件中，修改 css 的 loader 规则
use: ["style-loader", "css-loader", "postcss-loader"]
- 打包样式表中的图片和字体文件
1. 在终端输入 npm i url-loader file-loader
2. 在 webpack.config.js 中配置 loader 规则
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
// ?后面是loader的参数项
// limit用来指定文件的大小 单位是字节（byte） 只有不大于指定文件大小的文件才能别转换为字节流
use: "url-loader?limit=75000"
- 最后一步 打包项目
1. 先把跟目录的dist删除
2.在package.json scripts标签最后一行中配置 "build":"webpack -p "
然后终端输入 npm run build 就会自动打包出来一个dist文件 里面有 js html 图片等资源
