webpack 是什么?
一个前端打包器。
webpack 只识别javascript. 所以需要安装nodejs环境。
那么打包webpack 步骤是怎样的呢?
通过 npmjs.co 网站可以搜索依赖包
1. 安装nvm nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文网 nvm 用来管理不同版本的nodejs
2. nvm --version 检查nvm 是否安装成功
3.nvm list available 查看所有可以安装的nodejs
4.nvm list 检查所有的版本
5.nvm install 版本 安装指定的版本nodejs
6. nvm unstall xxx 表示卸载依赖
7. nvm use 版本 使用哪个版本
8.node -v 显示nodejs 的版本
9.npm -v 显示包管理器的版本
成功显示后就可以开始对工程进行打包了!!!!
打包过程就是把文件打包成dist
1.创建一个web工程文件
2. 在该文件下cmd打开 输入npm init -y
3.下载淘宝镜像 输入 npm config set registry https://registry.npmmirror.com/
4.安依赖 npm install webpack webpack-cli --save-dev (在开发环境中的)
5.手动创建webpack.config.js文件配置 webpack.config.js 手动添加入口文件
6.写入src文件 (写js,css html)
7.npx webpack --config webpack.config.js (或者npm run build配置过的命令) 打包成dist , 这样七步下来就可以生成dist 文件,将其部署到服务器就成功啦
注意!!
再次生成web工程
复制之前的package.json webpack.config.js等 建src目录 可以修改package.json 的name
下依赖时cmd再执行 npm i 就行(会自动下载node_modules和其他文件,自动检索依赖)
注意!!
jquery bootstrap 这些直接 npm install jquery npm install bootstrap@4 下载
而 css和js压缩 需要下载 ,引入加上配置修改了config文件,需要终止 ctrl + c 再启动
webpack 打包环节遇到的问题
1.安装时尽量是采用默认路径,减少出错
2.下载依赖包出现网络问题,下载慢 (配置淘宝镜像) 在终端输出以下命令
npm config set registry https://registry.npm.taobao.org
恢复
npm config set registry https://registry.npmjs.org
webpack 如何使用?
1.安装nodejs环境
2.构建项目下载webpack 所需的依赖
3.创建目录 打开终端 npm install webpack webpack-cli --save-dev
4.创建公共文件 配置 webpack.config.common.js
5.分离开发环境 和生成环境
webpack.config.dev.js webpack.config.prod.js
6.在公共文件应该配置哪些选项
(入口文件 插件 loader [css/ less / scss / 图片] 打包模式 ....)
7.在package.json 文件配置脚本
"scripts": { "build": "npx webpack --config webpack.config.js", "dev": "npx webpack serve --config webpack.config.dev.js", "serve": "npx webpack serve --config webpack.config.dev.js", "start": "npx webpack serve --config webpack.config.dev.js", "prod": "npx webpack --config webpack.config.prod.js" },
8. 在src里写入口文件 以及css js 图片 ,将其引入入口文件
公共文件 webpack.config.common.js
// 导入path模块
const path = require('path');
// 处理html模板的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除冗余文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 分离css文件(提取css代码)
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 配置
const option = {
// 入口文件
entry: {
index: "./src/index.js"
},
// 打包模式
// development: 开发环境
// production: 生产环境
// mode: "production",
// 输出目录
output: {
// 设置输出的目录
path: path.resolve(__dirname, 'dist'),
// 设置输出的js文件
filename: 'js/boundle-[hash].js',
},
// 配置loader (加载器)
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "",
},
},
"css-loader"
],
},
{
test: /\.less$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader",
"less-loader",
],
},
{
test: /\.s[ac]ss$/i,
use: [
// 把js样式对应的脚本写入bundle.js文件
// "style-loader",
{
loader: MiniCssExtractPlugin.loader,
},
// 把css转换成js
"css-loader",
// 编译sass成css
"sass-loader",
],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
// 超出8kb,就不转换成base64格式
// 限制 小于等于8kb的图片,做成base64格式
// 8192/1024 = 8kb
limit: 8192,
// 禁用严格模式
esModule: false,
// 设置输出的文件路径
// outputPath: 'images',
name: './images/[name]_[hash].[ext]',
},
},
],
},
],
},
// 配置插件
plugins: [
// 设置模板
new HtmlWebpackPlugin({
title: "主页",
template: "./src/index.html",// 模板路径
filename: 'index.html',// 输出html的文件名称
inject: "head",// 插入脚本的位置
chunks: ['index'],// 插入哪些脚本文件
}),
// 清理冗余文件
new CleanWebpackPlugin(),
// 提取css
new MiniCssExtractPlugin({
filename: "css/[name].css",
})
]
}
// 配置选项 (暴露)
module.exports = option;
webpack.config.dev.js 开发环境
// 开发环境
const common = require("./webpack.config.common");
const path = require("path");
// 导入合并模块的包
const { merge } = require("webpack-merge");
// const webpackDevServer = require('webpack-dev-server');
// 配置开发环境
module.exports = merge(common, {
mode: "development",
// 开启http服务
devServer: {
// 设置需要运行目录
// static: "./dist",
static: path.resolve(__dirname, 'dist'),
// 设置服务的端口
port: 8080,
// 自动打开页面
open: true,
// 设置保存更新页面
hot: true,
// 旧版本
// proxy: {
// "/api": {
// // 目标
// target: "https://www.gaokaozhitongche.com",
// // // 设置跨域
// // changeOrigin: true,
// // // 设置重载
// // pathRewrite: {
// // "^/api": ""
// // }
// }
// }
// 提供数据的服务器地址:
// 后台
// http://localhost:3000/test
// 前端
// http://localhost:8080
// 通过修改url
// http://localhost:8080/api/test
// http://localhost:8080/test
// 新版本
proxy: [
// {
// context: ['/', '/xpi'],
// target: 'http://localhost:3000',
// },
{
context: ['/', '/api'],
target: 'https://www.gaokaozhitongche.com',
secure: false,
changeOrigin: true,
},
],
}
// 别人的后台
// https://www.gaokaozhitongche.com
// https://www.gaokaozhitongche.com/api/v2/ranks/index-top3
// 我的前端
// http://localhost:8080
// 做网络代理后
// http://localhost:8080/api/v2/ranks/index-top3
})
webpack.config.prod.js 生产环境
// 生产环境
const common = require("./webpack.config.common");
// 导入合并模块的包
const { merge } = require("webpack-merge");
// 导入用于压缩css代码的依赖包
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 移除console.log代码
const TerserPlugin = require("terser-webpack-plugin");
// 配置生产环境
module.exports = merge(common, {
mode: "production",
//优化项目代码
optimization: {
// 是否压缩代码
minimize: true,
// 去除console.log()代码
minimizer: [
// 是否删除调试程序的代码
new TerserPlugin({
terserOptions: {
compress: {
// 是否删除项目中的console.log()
drop_console: true
}
}
}),
// 用于css代码压缩
new CssMinimizerPlugin()
],
},
})