在Windows下使用webpack入门

最新推荐文章于 2024-05-29 21:08:09 发布

lbhxnzs

最新推荐文章于 2024-05-29 21:08:09 发布

阅读量953

点赞数

分类专栏： webpack

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

转载请注明出处。 http://blog.csdn.net/ganyingxie123456/article/details/70176401

在Windows下使用webpack入门

本文所用所有源代码地址：
https://github.com/Xganying/webpack/tree/master/webpack_test

1. webpack的打包示意图理解：

这里写图片描述

2. 前期准备

安装node

这里写图片描述

新建一个文件夹：webpack_test

这里写图片描述

3. 安装并使用webpack

（1）在命令行下进入文件夹：webpack_test中，并初始化：

这里写图片描述

（2）在当前文件中安装webpack

这里写图片描述

安装webpack成功后，会看到webpack_test下有两个文件：node_modules和package.json：

这里写图片描述

（3）在webpack_test目录下，新建文件：hello.js

function hello(){
    console.log("hello, this is Cynthia !");
}

（4）用webpack将hello.js文件打包成hello.buddle.js文件：

这里写图片描述

理解字段含义：

    Asset: 本次打包生产的文件
    Size: 这个文件的大小
    Chunks ： 这次打包的模块
    Chunk Names： 这次打包的模块的名称

打包后就会得到文件：hello.bunddle.js ，查看该文件内容时，它前面的都是webpack自动生成的一些内置函数等，而自己写的代码则在最后。

这里写图片描述

（5）注意：

可能由于是第一次使用webpack，所以在命令行时，可能会出现以下情况：

这里写图片描述

解决办法：需要安装一个全局的webpack，例如

这里写图片描述

这样就可以正常的使用webpack了。

（6）接着，继续新建文件：world.js

function world(){
    return{

    }
}

在hello.js文件中引用：

require('./world.js');

function hello(){
    console.log("hello, this is Cynthia !");
}

然后打包就会发现显示的是Hello.js模块的编号是0，而world.js的模块编号是1：

这里写图片描述

打包后的文件则显示为：

这里写图片描述

（7）继续新建文件：style.css

body{
    margin: 0;
    padding: 0;
}

在hello.js中引用：

require('./world.js');
require('./style.css');

function hello(){
    console.log("hello, this is Cynthia !");
}

打包时发现报错：

这里写图片描述

原因：Webpack不支持css文件，如果要处理css文件，得依赖loader。

（8）安装loader:

这里写图片描述

但是打包还是出错：

这里写图片描述

因为虽然引用了css文件，但是并没有给它指定loader,所以仍然会报错，给css文件指定loader,再打包：

这里写图片描述

这就就可以正常打包了，可以看到打包以后生成的部分代码：

这里写图片描述

（9）新建一个index.html文件，并引用hello.buddle.js,再执行一遍打包

<!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>webpack_test</title>
</head>
<body>
    <script type="text/javascript" src="./hello.buddle.js"></script>
</body>
</html>

这里写图片描述

（10）修改：在style.css文件中添加样式，使得背景变为红色

body{
    margin: 0;
    padding: 0;
    background: red;
}

重新打包后，在浏览器运行index.html文件，结果发现并没有改变背景颜色，原因是在引用css文件时，还需要style-loader:

这里写图片描述

这样，浏览器运行index.html之后发现背景样式就改变了。

结论：

css-loader: 使webpack可以处理.css文件
style-loade r: 把通过css-loader处理完的文件，通过一个style标签插入到.html文件当中。当index.html引用打包后的hello.buddle.js文件，并执行的时候，css的内容就会插入到html文件中。

但是并不是每次都要这样加载这些loader文件，因为这样做可能会很麻烦。所以就可以指定这些loader文件:

这里写图片描述

但是我们发现每一次打包文件的时候，都要输入这么长的命令，很繁琐，也不好，所以可以通过–watch这个参数，使得每次执行打包的时候自动更新文件:

这里写图片描述

除了–watch这个参数外，还有其他参数，例如常用的还有：

–process ，可以看到打包的过程
–display-module : 查看打包的模块
–display-reason ；查看打包模块的原因

还有许多参数在此不再多说明了。

PS:
本文是我入门学习webpack的一个入门示例，十分简单的易懂，若果您觉得有说得不妥的地方，欢迎您的指出，可以通过留言方式或者直接联系本人哦~

lbhxnzs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在Windows下使用webpack入门

转载请注明出处。 http://blog.csdn.net/ganyingxie123456/article/details/70176401在Windows下使用webpack入门本文所用所有源代码地址： https://github.com/Xganying/webpack/tree/master/webpack_test1. webpack的打包示意图理解：2. 前期准备安装node新建一个...
复制链接

扫一扫