================================================
【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 AM
Asset 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 AM
Asset 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 放在同级目录下:
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 AM
Asset 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 PM
Asset 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 PM
Asset 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
D:\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 --open
i 「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 PM
Asset 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'}),
],
};