webpack的使用方法（详细过程）介绍
什么是webpack？
如果想手动的一步一步的配置 webpack，那么可以根据下面的文档进行操作。
webpack是资源加载/打包工具
project1/src/dist/
说白了，就是把开发环境src目录中的文件，打包到生产环境dist目录下。
打包指把src下那些碎片化的文件，合并到一起，生成到dist下。
部署指把dist目录当成网站根目录，供别人访问。
如何使用webpack?
全局安装
npm i -g webpack webpack-cli
查看版本号
webpack -v # 4.29.6
webpack-cli -v # 3.3.0
创建项目目录
mkdir project1 && cd project1
初始化项目
npm init
npm init -y （-y参数的作用是创建package.json时都安装默认的来）
局部安装
npm i -D webpack webpack-cli
创建目录结构、文件和内容：
project1/package.jsonsrc/index.js
src/index.js 中的代码：
- 在安装一个要打包到生产环境的安装包时，应使用 npm i -S，完整写法为 npm install --save lodash
- 如果安装一个用于开发环境的安装包，应使用 npm i -D，完整写法为 npm install --save-dev lodash
// lodash 是一个js工具库，用来操作 object、array、number... 更方便了
import _ from 'lodash'; // npm install --save lodash
function component(){var element = document.createElement('div')element.innerHTML = _.join(['Hello', 'webpack'], ' ')return element;
}
document.body.appendChild( component() )
创建目录结构、文件和内容：
project1/package.jsondist/index.html
dist/index.html 中的代码：
- main.js 文件目前还不存在
- 需要通过webpack把src/index.js文件及其依赖文件lodash打包到一起
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body></body>
</html>
<script src="main.js"></script>
在命令行中执行：
npx webpack
执行 npx webpack，会将我们的脚本作为入口起点，然后输出为 main.js
Node 8.2+ 提供了 npx 命令，可以运行在初始安装的 webpack包（package）的webpack二进制文件
然后就可以浏览dist/index.html网页了
配置文件
在项目根目录下建立webpack.config.js文件
project1/webpack.config.js
编写代码，配置打包内容。
// 在 webpack 中使用 require 引入自带的path模块 (CommomJS规范)
const path = require('path')
module.exports = {entry: './src/index.js',output: {filename: 'index.js',path: path.resolve(__dirname, 'dist')}
}
entry描述的是入口；output描述的是出口。
命令行执行：
npx webpack --config webpack.config.js
说明：根据配置页进行打包，入口为src/index.js，根据入口页的相关依赖，合并到dist/index.js中。
也可以直接执行：
webpack
两个命令是等效的
NPM脚本
考虑到用 CLI 这种方法来运行本地的 webpack 不是特别方便，我们可以设置快捷方式。
在 package.json 文件的 scripts 对象中，增加 build 脚本，当执行 build 脚本时，实际执行的是 webpack 命令。
"scripts":{"abc" : "npx webpack --config webpack.config.js","build": "webpack"
}
使用 npm run build 命令，代替之前使用的 webpack 命令。
npm run build # npm run abc
资源管理
加载当前项目所用到的其他资源
- 加载 CSS
- 加载图片
- 加载字体
加载 CSS
下载在js中解析css的模块，我们要把js和css打包到一起。
npm install -D style-loader css-loader
webpack.config.js 配置规则
module.exports = {entry: // ......output: // .....module: {rules:[{ test:/\.css$/, use:['style-loader', 'css-loader'] }]}
}
module.rules表示使用webpack打包模块时所定义的打包规则。
webpack打包时，如果碰到的是.css结尾的文件，使用style-loader和css-loader处理。
- style-loader：将 JS 字符串生成为 style 节点
- css-loader：将 CSS 转换为 CommonJS 模块
src/style.css
.hello { color:red }
src/index.js
import './style.css'
function component(){// ........element.classList.add('hello')
}
命令行中执行：
npm run build
如果想使用 scss 文件，需要安装
npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
npm install sass-loader node-sass --save-dev
然后规则中配置：
{ test:/\.scss$/, use:['style-loader', 'css-loader', 'sass-loader'] }
加载图片
CSS 和 JS 中的图片如何处理？
需要安装：
npm install --save-dev file-loader
然后在 webpack.config.js 页面中配置规则：
{ test:/\.(png|svg|jpg|gif)$/, use:['file-loader'] }
创建文件及编写代码
src/images/1.jpg2.jpgindex.jsimport img from './images/1.jpg'myImg = new Image();myImg.src = img;document.body.appendChild( myImg );style.scssbackground: url(../images/2.jpg)
命令行执行：
npm run build
两张图片会被复制到 dist 目录下面，网页能正常使用，如果想配置图片输出后的路径，可以：
use:[{loader:'file-loader', options:{name:'[name].[ext]', outputPath:'images'}
}]
加载字体
字体这种资源需要用到 file-loader 或 url-loader
npm i -D url-loader
规则配置：(二选一)
- file-loader会保存单独的字体文件
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }
- url-loader会和js合并到一起
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['url-loader'] }
style.css 或 style.scss
@font-face{font-family: abc;src: url(../fonts/经典毛笔字体.ttf) format("truetype");
}
div{ font-family:"abc" }
命令行
npm run build
PC端多入口
PC端项目中可能有很多个入口，比如 index.html，比如 main.html 等，浏览器中都可以直接访问。
移动端项目SPA都是单页面应用，用一个入口就可以了，如果是传统的PC端，那么需要用到很多入口页面。
dist/index.html
<script src="index.js"></script>
dist/main.html
<script src="main.js"></script>
// src/main.js
import fn from './main2.js';
fn();// src/main2.js
export default function(){console.log(123)
}
在浏览器中分别访问这两个文件，这两个文件分别依赖的js文件，都是独立的，这就是多入口多出口。
wepack.config.js
entry:{index:'./src/index.js',main:'./src/main.js'
},
output:{filename:'[name].js',path:path.resolve(__dirname, 'dist')
}
entry描述的是入口，表示有两个入口 ，一个名字叫做index，一个名字叫做main。
output描述的是出口，filename描述的是打包后文件的名字，[name]是关键字表示entry入口文件名，path表示合并后文件所在位置。
命令行：
npm run build
就能够根据entry的配置打包出2个js文件了
插件
安装：
npm install --save-dev html-webpack-plugin
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
entry: { ... },
plugins: [ new HtmlWebpackPlugin({title:'标题栏内容'}) ],
output: { ... }
HtmlWebpackPlugin 的作用就是在 dist 目录下生成 index.html 文件，
我们现在的项目中存在 dist/index.html 所以命令执行后，会将之前的文件覆盖了，
如果项目中不存在 dist/index.html，那么 HtmlWebpackPlugin 也能够根据默认的配置把这个 index 文件创建出来。
如果是PC端多入口，上面的代码会将多入口形成的文件都引入 index.html 文件中。
清理dist目录
每次执行webpack编译时，最好先把之前的内容清理干净，然后重新生成。
npm install clean-webpack-plugin --save-dev
webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins:[new CleanWebpackPlugin(),new HtmlWebpackPlugin...
]
错误调试
webpack 是把很多个文件捆绑到一起，那么如果有段代码出错了，怎么定位错误？
src/index.js
使用 console.error 模拟一个错误出来，执行 npm run build 重新生成捆绑后的文件，浏览器运行。
浏览器的控制台中会报错，因为我们访问的是生产环境下的代码，所以报的是生产环境下的错误，所以不好定位错误。
webpack.config.js
entry:{ ... },
devtool: 'inline-source-map'
加上 devtool 配置后，就能够定位到错误了，但要记得这仅仅是为了调试，生产时要关闭。
自动编译和自动刷新
每次修改文件后，都需要手动 npm run build 这太麻烦了，所以可以安装
npm install --save-dev webpack-dev-server
webpack.config.js
devtool: ...
devServer: { contentBase: './dist' }
package.json
"scripts":{"start" : "webpack-dev-server --open"
}
命令行运行
npm start
然后直接修改 src 下的文件，在浏览器中浏览 dist 下的文件，看效果。
webpack-dev-server --open 并不会在 dist 下生成文件，而是以内存形式保存文件，最终还是需要使用 build 打包。
别名
可以把长的文件名配置短的别名，这样描述依赖文件时会方便一些。
output: ...,
resolve:{alias: {'@': path.resolve('src'),'#': path.resolve('src/images'),'fa': path.resolve('src/fonts/font-awesome-4.7.0/css'),}
},
使用别名
//import printMe from '@/print.js'
//import img from '#/1.jpg';
import 'fa/font-awesome.min.css'
<font class="fa fa-home"></font>
不能用$当别名，修改webpack.config.js后要重新npm start
代理
解决跨域问题的一种方案
src/index.js
var button = document.createElement('input')
button.type = 'button';
button.value = '直接请求，因同源策略问题会被拦截下来';
button.onclick = function(){fetch('http://www.wyyijiaqin.com').then(response=>response.text()).then(result=>{console.log(result)})
}
document.body.appendChild( button )var button = document.createElement('input')
button.type = 'button';
button.value = '代理请求，能够拿到数据';
button.onclick = function(){fetch('/api').then(response=>response.text()).then(result=>{console.log(result)})
}
document.body.appendChild( button )
webpack.config.js
devServer: { contentBase: './dist',proxy:{"/api": {target: "http://www.wyyijiaqin.com",pathRewrite: { '^/api': '' },//secure: false,changeOrigin: true,}}
},
启动 devServer ，该代理才有作用。
打包时，代码是否压缩？
mode属性可以定义打包时代码是否压缩。
- development 不压缩代码
- production 压缩代码，默认
output: ...,
mode: "development"
post-css
cnpm i postcss-loader -D
cnpm i autoprefixer -D # 处理css浏览器兼容
这个模块是用来处理css兼容的，会自动给css加上浏览器前缀，如-ms- -webkit- 等
style/index.css
span{background: red;color:white;display: flex;flex: 1;transform: translate(-50%, -50%)
}
index.js
import './style/index.css';
webpack.config.js
{test: /\.css$/,use: ['style-loader', 'css-loader', {loader: 'postcss-loader',options:{plugins: [require('autoprefixer')("last 100 versions")]}}]
}
require(‘autoprefixer’)(“last 100 versions”) 参数改了就会出错。
语义：如果碰到css文件，先用style-loader和css-loader 处理，然后用postcss-loader处理，使用require引入autoprefixer模块，处理css兼容
疫情可以阻挡住你的身体，挡不住你学习的渴望，逆战班让学习坚持不懈。
webpack的使用方法（详细过程）介绍相关推荐
- 百度地图显示的超详细过程介绍
本文介绍百度地图的简单显示的操作步骤,对于详细显示百度地图的定位,检索,路线规划等等,另作文章总结. 一．百度地图的使用 (一)显示百度地图的步骤有下面几步: 下载SDK 加入lib中,依赖jar,并 ...
- 第15.7节 PyQt入门学习：PyQt5应用构建详细过程介绍
一. 引言 在上节<第15.6节 PyQt5安装与配置>结束了PyQt5的安装和配置过程,本节将编写一个简单的PyQt5应用,介绍基本的PyQt5应用的文件组成及相关工具的使用. 本节的应 ...
- 【EventBus】EventBus 源码解析 ( 注册订阅者 | 注册订阅方法详细过程 )
文章目录 前言 一.EventBus 注册订阅者 二.注册订阅方法的具体过程 三.Subscription 类 前言 在上一篇博客 [EventBus]EventBus 源码解析 ( 注册订阅者 | ...
- 关于阿里云服务器ECS与域名的绑定详细过程介绍
本文简单的介绍下阿里云的虚拟服务器ECS与域名绑定 条件:阿里云服务器+已实名认证域名 域名解析 1进入阿里云管理控制台 --云解析DNS,选择需要解析的域名--解析 2添加两条解析,打码的地方添自己 ...
- oracle11g 安装2 卡住,oracle11g 最终版本11.2.0.4安装详细过程介绍(2)
# 查找文件路径 [oracle@azure_earth_dbm1_3_111 database]$ find /data/ -name orainstRoot.sh /data/oraInvento ...
- 经典IDEF系统分析方法详细介绍
经典IDEF系统分析方法详细介绍 (转载) IDEF是ICAM DEFinition method 的缩写,是美国空军在70年代末80年代初ICAM(Integrated Computer Aided ...
- 【PyTorch】构造VGG19网络进行本地图片分类（超详细过程）——项目介绍
本篇博客主要解决以下3个问题: 如何自定义网络(以VGG19为例). 如何自建数据集并加载至模型中. 如何使用自定义数据训练自定义模型. 第一篇:[PyTorch]构造VGG19网络进行本地图片分类( ...
- CV之face_recognition：Py之face_recognition库安装、介绍、使用方法详细攻略
CV之face_recognition:Py之face_recognition库安装.介绍.使用方法详细攻略 目录 face_recognition简介 face_recognition安装 face ...
- 如何更换安装鸿蒙系统,华为鸿蒙系统2.0如何进行安装？鸿蒙系统2.0安装方法详细介绍...
华为鸿蒙系统2.0如何进行安装?现在已经可以安装鸿蒙系统2.0,但是你不清楚安装,下面就让浏览器小编为大家带来,鸿蒙系统2.0安装方法详细介绍. 部分更新了华为鸿蒙OS用户表示,安卓和鸿蒙的应用软件都 ...
- 鸿蒙系统可以安装的浏览器,华为鸿蒙系统2.0如何进行安装？鸿蒙系统2.0安装方法详细介绍...
华为鸿蒙系统2.0如何进行安装?现在已经可以安装鸿蒙系统2.0,但是你不清楚安装,下面就让浏览器小编为大家带来,鸿蒙系统2.0安装方法详细介绍. 部分更新了华为鸿蒙OS用户表示,安卓和鸿蒙的应用软件都 ...
最新文章
- 算法笔记-归并排序、归并排序时间复杂度、例题
- 【Android 逆向】Android 系统文件分析 ( /system/ 系统命令和系统应用数据目录 | /system/app/ 系统应用目录 | sys Linux 系统内核文件目录 )
- 【Android 安全】DEX 加密 ( Proguard 简介 | 默认 ProGuard 分析 )
- Python基础语法-Python,Java,C++变量互换值的区别
- 《Python Cookbook 3rd》笔记（3.9）：大型数组运算
- C++ 从入门到入土（English Version）Section 7 : Classes, Objects and Pointers
- 【Unity】制作剧情向游戏使用Fungus插件
- latex---插入三线表伪代码流程图
- pt100热电阻计算公式C语言,PT100计算公式
- 剑指offer--46.47.发散思维能力
- 国民感冒众生相，“微大夫”电磁脉冲预防+舒缓
- Python找列表中最大元素的下标
- java自制语音识别,老司机搞定java使用语音识别将文字转换成语音
- 2023年的深度学习入门指南(10) - CUDA编程基础
- 使用uni-app把h5网页封装成app
- 微信 - 微信小程序
- 一切都好，只是很想念
- 音乐 美术 劳技 计算机教研组工作总结,小班教研组工作总结
- I帧、P帧、B帧、GOP、IDR 和PTS, DTS之间的关系
- 「LibreOJ NOI Round #2」单枪匹马