【人生苦短我学Vue】-【DAY08】-webpack详解（1）

放开这颗白菜让我来

于 2020-07-20 19:55:42 发布

阅读量189

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44226263/article/details/107458801

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

大家好，我是被白菜拱的猪。

一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy!

文章目录

一、写在前言
二、webpack详解
三、结束语

一、写在前言

不知不觉Vue的学习已经进入第八天，回顾前几天的学习，不得不承认学习效率之低，在黑暗中摸索前行，决定改变学习方法，之前是看一下视频，然后自己敲一下。现在决定学完一大个知识点，然后回顾内容，在重新按照脑海中的记忆，自己独立的敲一遍，脑子只有越用越灵光，仅仅看视频是不行的。写到这里，又想睡觉了，我真的是服了自己了，每天的效率真的是想象不到的低啊，不过还好，总比啥也不学强。在每一天的学习的过程中，肉也多了，屁股也大了，人变得跟猥琐了，仿佛看到了我日后继续单身十年的日子，不愧是the King of single dog！

让我们拉开神秘的面纱，走进webpack的殿堂。

二、webpack详解

（一）认识webpack

什么是webpack?
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
这是中文官网的原话，读起来是不是非常的抽象，核心就是四个字“模块”“打包”下面这张图就是截取中文官网的首页。webpack就是打包所有的资源。
在这里插入图片描述
前面我们将了为什么要模块化开发，而webpack就是配合我们能够更好的模块开发，它能够将我们开发的各种资源能够打包成一个包，在HTML中使用。另外还可以对资源进行处理，例如假如我们使用ES6语法编写的程序，有些浏览器不支持，webpack可以将其转化为ES5然后在浏览器中运行，除此之外可以对图片进行压缩，将TypeScript转化为JavaScript。

所以有了webpack，我们更好的进行模块化开发。

（二）webpack的安装

首先webpack是依赖Node.js的，我们安装webpack的第一步是看看我们是否已经安装了Node.js。在终端窗口敲入node -v来查看。没有的话在官网上下一个就可以了。

然后使用npm install webpack@3.6.0 -g 全局安装webpack，这里使用@3.6.0是因为视频后面介绍的vue cli2依赖该版本。

当然除了全局安装还有局部安装，局部安装的命令是 npm install webpack@3.6.0 --save-dev
dev即development 开发版

（三）webpack的起步

既然安装好了，那么让我们用起来吧。在具体使用之前，先介绍一下我们真实开发过程中工程目录的层级结构。

dist是放我们打包过后的文件。src是放我们的源文件，main.js是我们的入口文件。index.html是我们在浏览器展示的页面。他与dist，src是同一级。
在这里插入图片描述

然后我们在aaa.js 和info.js写代码。然后在main.js 中引入
在这里插入图片描述

那么如何打包呢使用webpack命令。

webpack ./src/main.js ./dist/bundle.js

在这里插入图片描述
显示这个就代表打包成功，然后在index.html文件引入dist里面的bundle.js就ok了。

<script src="./dist/bundle.js"></script>

下面总结一下：
在这里插入图片描述
在真实开发中，我们只用引用一个js就ok了，不用一个一个引用。这就是webpack的好处。

（四）webpack的配置

1、指定一个默认的入口与出口

在经过上面演示之后，我们在想，每次使用

webpack ./src/main.js ./dist/bundle.js

这条命令，我们要指明打包哪个文件以及打包成哪个文件，这样就很麻烦，那么能不能直接给他一个默认的入口与出口呢。

这时候我们需要创建一个webpack.config.js文件，注意名字必须一摸一样，不能自我发挥，内容如下：
在这里插入图片描述
注意output要求是一个绝对路径，否则会报错。那么如何动态的获取绝对路径呢，这时候我们要借用node包里面的path，那现在没有啊，没有我们就是用 npm init 安装，__dirname是当前文件所在文件夹的绝对路径。

最后生成了package.json文件。
在这里插入图片描述
最后直接使用webpack命令就可以打包。

2、npm run build

将npm run build与webpack映射，即使用npm run build 相当于使用webpack。为什么要这么做腻，因为在后续的开发中单纯使用webpack命令后面会有很多参数，不太方便。

如何配置的，打开package.json文件，如图所示，添加命令。
在这里插入图片描述
而且在改文件使用webpack时，会优先寻找啊本地的webpack。在实际开发过程中，每一个项目都有一个本地的webpack，而且使用的也是本地的，因为会出现全局的和本地的版本不一致的情况。假如直接输入webpack，它是用的是全局的。

3、局部安装局部webpack

在这里插入图片描述
比如我们在github中下载项目，别人用的是3点几的webpack打包的，而我们全局的版本的是4点几，那我们在继续打包的时候就会可能出现错误。

本地webpack安装指令：

npm install webpack@3.6.0 --save-dev

（五）loader的使用

什么是loader？下面截取官网上的对其的解释。
在这里插入图片描述
同样是不仔细揣摩看不懂系列，那就让利哥的大白话给你解释解释什么是loader。在我们前面的演示中，我们仅仅使用webpack对js文件进行了处理，webpack会自动处理js文件之间的依赖。但是我们敲代码不仅仅只有js文件还有css文件，图片。还有可能要将ES6转为为ES5等等。这些对于webpack本身是做不到的，所以找了一个好兄弟帮帮他，这位大兄弟的为名字就叫做loader。

loader的使用大体分为两个步骤。
在这里插入图片描述
这里我们怎么知道需要什么loader呢，我们可以通过官网去查阅即可。

好了那我们看看loader针对不同文件是如何使用的吧。

1、CSS文件处理

我们按照步骤一步步的来

（1）创建css文件

这里我选择将文件颜色改成红色，寓意着我买的基金一路飙红。

body{
  background-color: red;
}

这样可以直接用吗？不可以，webpack要从入口中查找所依赖的文件，所以我们要在入口中引用它。

（2）在main.js中引用

//css文件
require("./css/ccc.css")

我们先尝试打包，看能不能打包成功。果不其然出错了
在这里插入图片描述
错误上说我们需要一个合适的loader。

（3）下载loader

下载什么loader啊，这时候我们就要动动我们的小手指去官网上查一查css文件需要什么loader，然后通过npm命令下载。
在这里插入图片描述
官网上说我们需要这两个loader。

npm install style-loader --save-dev

npm install --save-dev css-loader

官网建议我们这两个一定要结合使用，为什么这么说呢？待会见分晓。

（4）配置module于webpack.config.js文件

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    //获取绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

test是一个正则表达式，表明是一个css文件、
下面说说为什么要style和css-loader结合使用，css-loader只负责加载，意思就是说把它拿过来了，但是没有用它，style-loader是负责渲染，就是把加载过来的css文件使其产生效果。

另外两个的顺序不能变，我们有疑问了不是排在前面的先执行嘛，不是的，在webpack.config.js文件中是从右往左，从下往上加载。所以顺序一定不能写错。

最后我们执行以下npm run build打包一下吧，看页面有没有该效果。
在这里插入图片描述
ok，perfect，红的我眼睛都要瞎了，基金啊基金，你能不能像背景一样这么红，说到这里，我的心就如刀割的一样，第一次买基金，结果就赶上大跌，赶巧不巧，还就在峰顶买入！楼顶的风好大，仿佛迷失了自我。

2、less文件处理

步骤同css一样，只不过用的loader不一样，用的是less-loader，这里就不在详细介绍。

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

3、图片文件处理

详情见
【人生苦短我学Vue】-【DAY08】-webpack详解（2）

三、结束语

未完待续…让我们在下一篇博客中继续叙说webpack的故事

放开这颗白菜让我来

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【人生苦短我学Vue】-【DAY08】-webpack详解（1）

大家好，我是被白菜拱的猪。一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy!文章目录一、写在前言二、webpack详解（一）认识webpack（二）webpack的安装（三）webpack的起步（四）webpack的配置1、指定一个默认的入口与出口2、npm run build3、局部安装局部webpack（五）loader的使用1、CSS文件处理（1）创建css文件（2）在main.js中引用（3）下载loader（4）配置module于webpac
复制链接

扫一扫