webpack打包器小结（1）

最新推荐文章于 2024-05-08 10:58:00 发布

tomjourney

最新推荐文章于 2024-05-08 10:58:00 发布

阅读量803

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/PacosonSWJTU/article/details/102984240

版权

react 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

================================================

【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 放在同级目录下：

参考官网配置： 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 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'}),
    ],
};

tomjourney

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack打包器小结（1）

================================================【1】intro to webpack官网：webpack官网: http://webpack.github.io/webpack3文档(英文): https://webpack.js.org/webpack3文档(中文): https://doc.webpack-china....
复制链接

扫一扫