web pack

最新推荐文章于 2022-07-19 19:12:14 发布

我家的小可爱

最新推荐文章于 2022-07-19 19:12:14 发布

阅读量184

点赞数 1

一，web pack简介
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
二，web pack安装
webpack的安装依赖npm，所以要先安装node.js
webpack两种安装方式：
1）全局安装
命令：npm i -g webpack@4.20.2
可以在全局情况下使用webpack
注意：不推荐全局安装，因为全局安装会锁定版本，如果在使用不同的webpack版本做项目，可能会导致构建
项目失败
2）本地安装
当前最新版本4.20.2
一下命令可以在本地安装最新稳定版本或指定版本
最新稳定版本：npm i --save-dev webpack
指定版本：npm i --save-dev
webpack@<version>
如果使用的是webpack4.0+的版本，需要安装webpack-CLI
npm i --save-dev webpack-cli
对于大多数项目，推荐使用本地安装，当引入依赖时，更容易分别升级项目
当进行本地安装时，可以在node_module/.bin/webpack文件夹下访问他的bin版本
，本地安装就是在当前项目中进行构建，其他项目无法进行访问
三，打包教学
1，创建项目
创建项目目录，初始化npm，本地安装webpack，安装webpack-cli，命令如下：
mkdir webpack-demo && cd webpack-demo
npm init -y
npm i webpack webpack-cli --save-dev
当前项目结构：
webpack-demo
|-packge.json
|-node_modules
+ |-index.html
+ |-/src
+ |-index.js
结构说明：index.html 是主入口文件，index.js是主入口打包文件，所有与index.js有关联的依赖都会被打包进去
2，引入依赖（打一个包）
webpack-demo
|-packge.json
|-node_modules
+ |-dist
+ |-index.html
- |-index.html
|-/src
|-index.js
dist：文件夹用于存放打包后的内容
使用包管理器安装lodash和jquery：
npm i --save lodash jquery@1.12.3
使用npm安装的内容都是下载到node_modules
使用webpack-cli打包： npx webpack
3，打包配置文件
webpack 4 以后的版本，不需要配置文件即可打包，很多项目比较复杂，可以设置在配置文件中配置；
相比终端输入大量命令更加高效，所以可以创建一个能够取代cli打包配置文件
项目结构：
webpack-demo
|-packge.json
|-node_modules
+ |-dist
+ |-index.html
- |-index.html
|-/src
|-index.js
+ |-webpack.config.js
配置文件基本内容：
const path = require('path');
module.exports = {
//将'./src/index.js'打包到dist文件夹中的bundle.js
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
打包命令：
npx webpack --config webpack.config.js
4，npm 脚本（npm script）
打包使用命令 npx webpack --config
webpack.config.js 我们觉得非常麻烦，太长，使用webpack-cli 打包
不够方便，所有我们可以设置一个快捷方式 npm script
在package.js 中添加脚本
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev_w": "webpack --config webpack.config.js",
"build_d": "webpack"
},
使用npm run dev_w 就相当于执行了 npx webpack --config webpack.config.js
5，打包css
创建css文件夹，创建myStyle.css
想要讲css打包，就需要webpack对css样式表进行支持；
命令：
npm i css-loader style-loader --save-dev
mac 有权限时加 sodu npm
css-loader ：便利样式，如果发现有import 导入css文件，就会讲css文件引入进来
style-loader ：将样式通过style 直接插入文档和头部
在index.js中加入:
require('!style-loader!css-loader!../css/myStyle.css');
另一种方式：
手动配置打包依赖，使用import引入
在index.js中加入：
import '.sty/.css'
webpack.config.js 中配置：
const path = require('path');
module.exports = {
//将'./src/index.js'打包到dist文件夹中的bundle.js
entry: './src/index.js',
output: {
filename: 'bundle(1).js',
path: path.resolve(__dirname, 'dist')
},
// 配置css-loader 和 style-loader
module: {
rules: [{
// 配置css-loader 和 style-loader
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
}
}
6，打包图片
使用file-loader 可以轻松的将图片加入到js和css中
安装命令：
cnpm i --save-dev file-loader
在webpack.config.js中配置（在rules中添加）：
{
// 配置file-loader
test: /\.(png|svg|jpg|jepg|gif)$/,
use: [
'file-loader'
]
}
进入index.js 引入图片（想要在css中使用，就先要在js中引入）
import hua from './1.jpg'
下边使用 hua 就是该路径，css 一旦没打包，其中所引用的图片都会自动被打包
7，打包字体图标
使用file-loader
在webpack.config.js中配置（在rules中添加）：
{
// 配置file-loader
test: /\.(eot|ttf|woff|woff2|otf)/,
use: [
'file-loader'
]
},
8，加载数据文件（json）
json,xml,csv,tsv ……
json文件默认是支持，不需要插件：
import data from './json.json'
安装xml-loader和csv-loader
cnpm i xml-loader csv-loader --save-dev
在webpack.config.js中配置（在rules中添加）：
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-:loader'
]
}
进入index.js使用：
import xml from './xml.xml'
9，模块的依赖关系
打包文件载入依赖文件（打包文件如果引入了其他模块，则会将其他模块一并打包带走）：
require()
eg:
var $ = require('jquery');
// 引入css的方式一
require('!style-loader!css-loader!../css/myStyle.css');
创建依赖模块：
1）创建一个js文件 data.js
var json = {
str: "我是data文件中的模块数据"
}
module.exports = json;
2）在index.js中引入
var d = require('./data.js');
创建一个函数模块，在index.js中引入该模块调用函数，传入名字，输出xxx你好，欢迎
四，打包处理
1，打包输出管理
index.html 根据项目的需求可能需要引入多个功能模块，那么主程序要引入多个bundle包，
所以我们需要对每个功能模块进行打包，并引入
2，多个功能模块打包
创建功能模块，print.js alert.js
创建webpack.config.js,并在其中配置
//多模块打包
entry: {
index: './src/index.js',
print: './src/print.js',
alert: './src/alert.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
3，自动更新打包
每次修改内容都需要重新打包，非常麻烦，使用自动打包插件，可以帮助我们自动打包
自动修改 index.html 文件引入的bundle包
安装插件：
cnpm i --save-dev html-webpack-plugin
进入webpack.config.js 修改
const HtmlWebpackPlugin = require
("html-webpack-plugin");
plugins: [
new HtmkWebpackPlugin({
title: '输出管理'
})
]

运行：npm run build 即可生效
自动清理dist文件夹
将没有用的bundle包删除
下载插件：
cnpm i clean-webpack-plugin --save-dev
const CleanWebpackPlugin = require
("clean-webpack-plugin");
plugins: [
new CleanWebpackPlugin(['dist'])
]
运行：npm run dev_w 即可生效
错误信息定位 source map
bundle包会将主文件以及依赖的文件打包在一起，并且对代码进行压缩（变为一行）
和混淆（变量全部认识了），一旦代码出现错误，就很难定位到
js自带一个功能，inlin-source-map （仅用于解释说明不能用于其他环境）
进入webpack.config.js 修改：
module.exports = {
……,
devtool:'inline-source-map'
}
运行：npm run dev_w 即可生效
观察者模式自动构建打包
每次修改代码都需要进行npm run dev_w 重新构建，
使用watch 可以自动监听构建
进入pack.json 修改：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev_w": "webpack --config webpack.config.js",
"build_d": "webpack",
"watch": "webpack --watch"
},
4，简单的本地服务器 webpack-dev-server
实现实时重载，实时打包，自动打开浏览器实时更新
下载插件：
cnpm i --save-dev webpack-dev-server
进入webpack.config.js 修改：
module.exports = {
……,
devtool:'inline-source-map',
devServer:{
contentBase:'./dist',
port:8888
}
}
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev_w": "webpack --config webpack.config.js",
"build_d": "webpack",
"watch": "webpack --watch",
+ "server":"webpack-dev-server --open"
},

我家的小可爱

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web pack

一，web pack简介本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。二，web pack安装 webpack的安装依赖npm...
复制链接

扫一扫