webpack入门

最新推荐文章于 2023-10-10 09:51:34 发布

棉安咚

最新推荐文章于 2023-10-10 09:51:34 发布

阅读量136

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_37814566/article/details/89012561

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

安装node环境

webpack本身就是使用node.js写的
我们安装完node环境的同时也安装完成npm

安装cnpm

因为npm拉取的镜像是国外的比较慢，所以我们统一使用cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装webpack相关文件

cnpm install -g webpack 
cnpm i -g webpack-cli

-g 即global，全局安装
i install简写

初次实验

index.html引用index1.js
index1.js引用index2.js

index.html

<!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>
    <script type="text/javascript" src="./index1.js" charset="utf-8"></script>
</body>
</html>

index1.js

let info = require("./index2.js");
document.write(`name:${info.name} age:${info.age}`);

index2.js

module.exports = {
    name:"xuwei",
    age:18
}

我们在浏览器中打开index.html
毫无疑问，报错了
‘
因为浏览器不认识JSX语法，所以也就不知道require是什么

修正问题

第一步：添加webpack.config.js文件

在这里插入图片描述

module.exports = {
    mode:"development",
    entry:"./index1.js",
    output:{
        path:__dirname,
        filename:"bundle.js"
    },
};

这个配置文件可以指导webpack如何进行工作
具体参数什么含义及如何编写，建议到官网进行查看 https://webpack.js.org/

第二步：运行webpack命令

PS E:\webpack> webpack
Hash: cd4cc87fdad1ca82b37d
Version: webpack 4.29.6
Time: 99ms
Built at: 2019-04-04 10:38:54
    Asset      Size  Chunks             Chunk Names
bundle.js  4.17 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./index1.js] 90 bytes {main} [built]
[./index2.js] 52 bytes {main} [built]
PS E:\webpack>

可以看到，生成了一个bundle.js文件
在这里插入图片描述
并不能看懂这个文件里写了什么~~

第三步：修改index.html中引用的js

将原来的index1.js 修改为bundle.js即可
webpack编译index1.js，把JSX转化为浏览器可以识别的javascript语法，即生成的文件bundle.js
在这里插入图片描述

经过上面的三步，在重新在浏览器中打开 index.html
即可看到运行成功
在这里插入图片描述

webpack第一次实践完成~

棉安咚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack入门

安装node环境webpack本身就是使用node.js写的同时我们安装完node环境的同时也安装完成npm安装cnpm因为npm拉取的镜像是国外的比较慢，所以我们统一使用cnpm$ npm install -g cnpm --registry=https://registry.npm.taobao.org安装webpackcnpm install -g webpack cnpm...
复制链接

扫一扫

专栏目录