webpack打包器小结（1）
================================================
【1】intro to webpack
官网：
webpack官网: http://webpack.github.io/
webpack3文档(英文): https://webpack.js.org/
webpack3文档(中文): https://doc.webpack-china.org/
================================================
【2】 自动化构建工具webpack_打包js,json文件
step1、创建文件夹 mywebpack ;
step2、在mywebpack 新建 package.json ，然后编辑， 填充如下配置：
{"name": "mywebpack","version": "1.0.0"
}step3、安装webpack（ npm install webpack --save-dev ）完成后（或许还需要安装 webpack-cli 命令如下 npm install webpack-cli --save-dev ），package.json 变成这个样子： 且生成了一个文件 package-lock.json
{"name": "mywebpack","version": "1.0.0","devDependencies": {"webpack": "^4.41.2"}
}
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install webpack-cli --save-dev
npm WARN mywebpack@1.0.0 No description
npm WARN mywebpack@1.0.0 No repository field.
npm WARN mywebpack@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ webpack-cli@3.3.10
added 24 packages from 22 contributors and audited 8972 packages in 19.616s
found 0 vulnerabilities
step4、开发index.js 首页，引入了js， css， json 文件；
目录结构如下：
文件明细如下：
index.js
import {multiply, mod} from './math.js'
import '../css/test.css'
import user from '../data/user.json'
import data from "../../../webpack_test/src/data/test";document.write("hello world")
document.write(multiply(2, 2, ))
document.write(mod(1000, 33, ))
document.write(JSON.stringify(user))math.js
export function multiply(x, y) {return x * y
}export function mod(x, y) {return x % y
}test.css
body{background: blue;
}#box1{width: 300px;height: 300px;background-image: url('../image/001.png');
}#box2{width: 300px;height: 300px;background-image: url('../image/002.png');
}user.json
{"name": "zhangsan","age" :100
}step5、使用webpack打包， 如下：
打包命令如下： webpack src/js/index.js --output-filename bundle.js --output-path dist/js --mode development
打包结果如下：
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack src/js/index.js --output-filename bundle.js --output-path dist/js --mode development
Hash: d59b081e19a4db8cdb0d
Version: webpack 4.41.2
Time: 98ms
Built at: 2019-11-09 11:10:41 AMAsset Size Chunks Chunk Names
bundle.js 6.42 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/css/test.css] 266 bytes {main} [built] [failed] [1 error]
[./src/data/user.json] 45 bytes {main} [built]
[./src/js/index.js] 243 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]ERROR in ./src/css/test.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body{
| background: blue;
| }@ ./src/js/index.js 2:0-24
错误信息说， 打包css文件需要css loader 加载器；
这里我们先注释掉 引入 css文件哪一行， 再次打包，成功， bingo。如下：
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack src/js/index.js --output-filename bundle.js --output-path dist/js --mode development
Hash: fc7aed1243c6e0d706d5
Version: webpack 4.41.2
Time: 100ms
Built at: 2019-11-09 11:12:03 AMAsset Size Chunks Chunk Names
bundle.js 5.63 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/data/user.json] 45 bytes {main} [built]
[./src/js/index.js] 246 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]
step6、打包结果如下：
step6.1 在dist文件夹下新建 index.html命令，然后引入 bundle.js , 如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的webpack首页</title>
</head>
<body><script type="text/javascript" src="js/bundle.js"></script>
</body>
</html>
================================================
【3】自动化构建工具webpack_config配置
1、写在前面：为什么需要引入 webpack.config.js 文件？
因为webpack的打包命令太复杂了，如 webpack src/js/entry.js --output-filename bundle.js --output-path dist/js --mode development
而使用了 webpack.config.js 之后，只需要在命令行执行 webpack 即可。
2、webpack.config.js 如下，与package.json 放在同级目录下：
参考官网配置： https://webpack.docschina.org/guides/getting-started/#%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6
webpack.config.js// node内置的模块用来去设置路径的
const path = require('path');module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/index.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/')}
};3、使用 webpack --mode development 进行打包，如下：
命令执行结果 D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack --mode development
Hash: fc7aed1243c6e0d706d5
Version: webpack 4.41.2
Time: 95ms
Built at: 2019-11-09 11:31:20 AMAsset Size Chunks Chunk Names
bundle.js 5.63 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/data/user.json] 45 bytes {main} [built]
[./src/js/index.js] 246 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]
================================================
【4】 自动化构建工具webpack_打包 css 文件
刚刚没能打包css文件，因为没有引入css 加载器， 现在引入，如下：
可以参考官网 https://webpack.docschina.org/loaders/css-loader/
step1：安装css加载器， npm install --save-dev css-loader style-loader file-loader url-loader
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install --save-dev css-loader style-loader file-loader url-loader
npm WARN mywebpack@1.0.0 No description
npm WARN mywebpack@1.0.0 No repository field.
npm WARN mywebpack@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ file-loader@4.2.0
+ url-loader@2.2.0
+ style-loader@1.0.0
+ css-loader@3.2.0
added 30 packages from 50 contributors and audited 4389 packages in 15.235s
found 0 vulnerabilities
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。
step2： 引入css文件，取消 index.js 的 css引入注释；如下：
index.js import {multiply, mod} from './math.js'
import '../css/test.css'
import user from '../data/user.json'document.write("hello world")
document.write(multiply(2, 2, ))
document.write(mod(1000, 33, ))
document.write(JSON.stringify(user))
step2.1、在 webpack.config.js 中引入css-loader 加载器 ， 如下：
又 css文件中引入了图片， 而打包图片，使用url-loader，如下：
// node内置的模块用来去设置路径的
const path = require('path');module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/index.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},
};执行 webpack --mode development 打包， 如下：
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack --mode development
Hash: 78ffadd980c422773682
Version: webpack 4.41.2
Time: 624ms
Built at: 2019-11-09 12:04:20 PMAsset Size Chunks Chunk Names
97b6ad90c25f31b0314ddbfa4ef67807.png 50.5 KiB [emitted]bundle.js 20.5 KiB main [emitted] main
f0551938a716cfe4c727aeba0f8c9ecd.png 96.6 KiB [emitted]
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/css/test.css] 653 bytes {main} [built]
[./src/css/test.css] 408 bytes {main} [built]
[./src/data/user.json] 41 bytes {main} [built]
[./src/image/001.png] 82 bytes {main} [built]
[./src/image/002.png] 82 bytes {main} [built]
[./src/js/index.js] 241 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]+ 3 hidden modules
打包结果如下：
【访问结果如下】 文字正常显示，css正常显示，但图片找不到， 报404；
补充，webpack打包图片时，有个问题：
1、若图片大小小于8K，则使用base64算法把图片转换字符串存储（本例是存放在 bundle.js 里面 ）；
2、若图片大于8K， 则不会生成字符串，而是以图片形式存储（这时，entry.js 就找不到图片的具体位置）；
【解决方法】 在 webpack.config.js 中添加 publicPath 属性，设置 index.html 搜索图片的路径；但不推荐使用这种方法， 因为带有强制性；
添加 publichPath 属性后的 webpack.config.js 如下：
// node内置的模块用来去设置路径的
const path = require('path');module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/index.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',publicPath: 'js/', // （添加publicPath属性）设置为index.html提供资源服务的时候带有强制性// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},
};可以正常访问。 bingo。
================================================
【5】基于webpack-dev-server实现自动编译打包（自动化构建工具webpack_热加载实现）
可以参考官网： https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server
also， 你可以参考我的博文： https://blog.csdn.net/PacosonSWJTU/article/details/102983394
具体步骤如下：
step1： 安装webpakc-dev-server npm install --save-dev webpack-dev-server
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>webpack --mode development
Hash: c0ef08ceddc1663b2fc1
Version: webpack 4.41.2
Time: 613ms
Built at: 2019-11-09 12:23:00 PMAsset Size Chunks Chunk Names
97b6ad90c25f31b0314ddbfa4ef67807.png 50.5 KiB [emitted]bundle.js 20.5 KiB main [emitted] main
f0551938a716cfe4c727aeba0f8c9ecd.png 96.6 KiB [emitted]
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/css/test.css] 653 bytes {main} [built]
[./src/css/test.css] 408 bytes {main} [built]
[./src/data/user.json] 41 bytes {main} [built]
[./src/image/001.png] 82 bytes {main} [built]
[./src/image/002.png] 82 bytes {main} [built]
[./src/js/index.js] 241 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]+ 3 hidden modulesD:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install --save-dev webpack-dev-server
npm WARN mywebpack@1.0.0 No description
npm WARN mywebpack@1.0.0 No repository field.
npm WARN mywebpack@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ webpack-dev-server@3.9.0
added 204 packages from 166 contributors and audited 7911 packages in 48.761s
found 0 vulnerabilities
step2： package.json 多了一个属性：webpack-dev-server ；
package.json {"name": "mywebpack","version": "1.0.0","devDependencies": {"css-loader": "^3.2.0","file-loader": "^4.2.0","style-loader": "^1.0.0","url-loader": "^2.2.0","webpack": "^4.41.2","webpack-dev-server": "^3.9.0"}
}
直接运行 webpack-dev-server， 报错如下：
step3： 在 package.json 文件下添加 scripts 属性，修改webpack.config.js （添加devServer ） 如下：
package.json {"name": "mywebpack","version": "1.0.0","devDependencies": {"css-loader": "^3.2.0","file-loader": "^4.2.0","style-loader": "^1.0.0","url-loader": "^2.2.0","webpack": "^4.41.2","webpack-dev-server": "^3.9.0"},"scripts": {"dev": "webpack-dev-server --open"}
}
webpack.config.js // node内置的模块用来去设置路径的
const path = require('path');module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/entry.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',// publicPath: 'js/', // 设置为index.html提供资源服务的时候带有强制性（会对自动打包有影响）// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/'),},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},devServer: {contentBase: './dist/' // webpack-dev-server 默认服务于根路径下的index.html},
};step4：再次运行命令 npm run dev
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm run dev> mywebpack@1.0.0 dev D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack
> webpack-dev-server --openi ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /js/
i ｢wds｣: Content not from webpack is served from ./dist/
i ｢wdm｣: Hash: 373307dc3fd94b391432
Version: webpack 4.41.2
Time: 1658ms
Built at: 2019-11-09 12:43:49 PMAsset Size Chunks Chunk Names
97b6ad90c25f31b0314ddbfa4ef67807.png 50.5 KiB [emitted]bundle.js 377 KiB main [emitted] main
f0551938a716cfe4c727aeba0f8c9ecd.png 96.6 KiB [emitted]
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/js/index.js 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/css/test.css] 408 bytes {main} [built]
[./src/data/user.json] 41 bytes {main} [built]
[./src/js/index.js] 241 bytes {main} [built]
[./src/js/math.js] 107 bytes {main} [built]+ 27 hidden modules
i ｢wdm｣: Compiled successfully.
webpack-dev-server 会启动一个服务器，开放8080端口访问。
随便修改 index.js 中的代码，添加一行代码如下：
document.write("小唐")；
webpack都会自动编译，如下：
访问效果：
================================================
【6】添加webpack插件
1、参考官网： https://webpack.docschina.org/plugins/html-webpack-plugin/ ；
2、下载插件：
D:\workbench_ws\web_pack\ProjectBuild\work\mywebpack>npm install --save-dev html-webpack-plugin clean-webpack-plugin
npm WARN mywebpack@1.0.0 No description
npm WARN mywebpack@1.0.0 No repository field.
npm WARN mywebpack@1.0.0 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ clean-webpack-plugin@3.0.0
+ html-webpack-plugin@3.2.0
added 56 packages from 84 contributors and audited 9120 packages in 29.171s
found 0 vulnerabilities
3、修改webpack.config.js 的配置，添加插件配置：
// node内置的模块用来去设置路径的
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成 html 文件插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 清除之前打包的文件module.exports = {// 入口文件配置， 当前项目的主文件entry: './src/js/index.js',// 出口/输出的配置output: {// 输出的文件名filename: 'bundle.js',publicPath: 'js/', // （添加publicPath属性）设置为index.html提供资源服务的时候带有强制性// 输出文件路径, resolve 路径拼接path: path.resolve(__dirname, 'dist/js/')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]}],},devServer: {contentBase: './dist/' // webpack-dev-server 默认服务于根路径下的index.html},plugins: [new HtmlWebpackPlugin({template: './dist/index.html'}),],
};webpack打包器小结（1）相关推荐
- npm（了解）+Babel转码器+模块化+webpack打包
目录 介绍 设置镜像导入依赖 其他命令 Babel转码器 模块化 es6怎么做模块化 webpack webpack的使用 介绍 一个包的管理工具,类似与Maven,用于前端中管理JS的依赖 查看版本 ...
- webpack 模块打包器
webpack的入门概念 概念 webpack是现代Javascript应用程序的模块打包器.当webpack处理程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些模块打 ...
- 一篇弄懂webpack静态资源打包器
认识 webpack是优秀的前端构建工具,静态资源打包器,可以根据模块依赖关系进行静态资源分析,快速打包生成相对应浏览器可以直接识别的静态资源! 环境 1)node环境 2)vs code编辑器 规约 ...
- 前端入门（二）npm包管理+模块化+bable转码器+webpack打包+vue-element-admin
一.npm包管理工具 NPM全称Node Package Manager,是Node.js包管理工具,相当于前端的Maven .不需要单独安装,和nodejs一起 在命令提示符输入 npm -v 可查 ...
- webpack打包流程_了不起的 Webpack 构建流程学习指南
最近原创文章回顾: <了不起的 tsconfig.json 指南> <了不起的 Webpack HMR 学习指南(含源码分析)> <<你不知道的 Blob>番 ...
- 可对前端打包器所构建的网站进行一键扫描的Packer Fuzzer
前言:Packer Fuzzer是一款对Webpack等前端打包工具所构造的网站进行快速.高效安全检测的扫描工具.当我们在Goby中遇到前端打包器所生成的站点时,联动Packer Fuzzer可以自动 ...
- webpack 打包ts项目_使用webpack打包ts
初始化package.json npm init -y cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合) 2.1 ...
- webpack打包测试_webpack入门笔记(一)
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gr ...
- vue webpack打包入口文件是哪个_Vue 学习笔记（二十五）：webpack 相关
Webpack 是什么 Vue CLI Webpack 相关 Webpack 更多参考官方文档 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定 ...
最新文章
- （十五）算法设计思想之“回溯算法”
- 在php中构造函数的作用,php构造函数的作用
- Linux加密框架 crypto算法模板 以及HMAC算法模板实例
- 10岁起编程，并不认为自己是“黑客”
- winform mysql 工具类_C#工具类MySqlHelper，基于MySql.Data.MySqlClient封装
- findler mac 隐藏文件_Fiddler配合Proxifier抓包PC客户端HTTPS明文数据
- Django表单form
- Skywalking-07：OAL原理——解释器实现
- ECSHOP邮件验证后送积分
- python dataframe 合并乱序列表_Python数据处理--删除重复项、数值替换和表合并
- 基于kubectl实现红队K8S模拟对抗
- Redis设计与实现读后感
- 研磨设计模式--抽象工厂模式
- 元素(Element)
- win10查看计算机系统版本,如何查看我的电脑是不是win10 1909版本？
- openssl1.1.1下载地址
- 【Android】自定义View、画布Canvas与画笔Paint
- 从上帝视角看进程调度
- 电阻 电容表 电感表 频率表 测量套件 51单片机 STC89C52 程序 万用表
- 经典算法应用之七----10亿数据中取最大的100个数据
热门文章
- UVA11525 Permutation 逆康托展开
- Codeforces Round #632 (Div. 2) E. Road to 1600 构造好题
- 【WC2018】通道【边分治】【虚树】【树的直径】
- CF1548B Integers Have Friends
- CodeForces - 76E Points
- 贪心： Array Splitting（数列分段）（洛谷CF1175D）
- P6478-[NOI Online #2 提高组]游戏【dp,二项式反演】
- P3971-[TJOI2014]Alice and Bob【贪心】
- CF438E-The Child and Binary Tree【生成函数】
- CF757F-Team Rocket Rises Again【最短路,DAG支配树】