27 webpack4.x安装及基本使用

最新推荐文章于 2020-08-17 00:03:30 发布

Civitasv

最新推荐文章于 2020-08-17 00:03:30 发布

阅读量243

点赞数

分类专栏： Vue 文章标签： vue webpack webpack4 安装

本文链接：https://blog.csdn.net/qq_40996400/article/details/104442961

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

webpack4.x安装及基本使用

webpack是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具。

网页中引入的静态资源过多会导致网页速度变慢，依赖关系也会十分复杂。而webpack的出现，使得可以完美完成资源的合并、打包、压缩、混淆，依赖关系处理等诸多功能。

在这里插入图片描述

webpack4更新之后有较大不同，官方文档中不建议全局安装webpack4。

对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。

所以本文结合案例介绍如何将webpack4安装到我们的项目之中。

1 案例

首先新建项目，且添加src文件夹，我们的代码文件即存放在该文件夹之中。

1.1 npm初始化

npm init -y

1.2 安装jquery包

npm i jquery -S

此时目录应为：

webpack_demo

|—node_modules

|—|---jquery

|—src

1.3 在src下新建index.html和index.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>webpack初探</title>
    <script src="index.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
</body>

</html>

index.js：

// es6导入包
import $ from "jquery";

$(function() {
  $("li:odd").css("backgroundColor", "lightblue");
  $("li:even").css("backgroundColor", function() {
    return "#" + "D97634";
  });
});

在chrome浏览器发现不能运行，无法使用es6语法，但我们又想要采用模块化的手段，不想要在html文件中直接引入jquery，因此决定采用webpack打包。

1.4 安装webpack webpack-cli

npm i webpack webpack-cli -D

等待运行完成

1.5 新建webpack.config.js文件(可选可不选)

这一步骤是可选可不选的，在webpack4.x中，已经可以实现无配置文件打包，但对于一些较复杂的项目，该文件仍是必要的，因此我建议你还是执行这一步骤。

const path = require("path");
module.exports = {
  // 开发模式
  mode: "development",
};

1.6 运行命令

node_modules\.bin\webpack

这是因为我们配置的不是全局的webpack而是此项目的webpack，该命令在node_modules\.bin\之下。

没有错误的话，打包已经成功了，在dist文件夹下生成了main.js文件。

2 修改打包入口和出口

默认情况下，打包入口为src/index.js，出口为dist/main.js，我们可以改变这一点，只需要对webpack.config.js文件进行修改即可(如果执行了1.5步直接修改文件就可，否则需要新建此文件)，下面是一个修改过后的webpack.config.js。

const path = require("path");
module.exports = {
  // 编译模式
  mode: "development",
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js" //输出文件的名称
  }
};

修改过后，打包入口为src/index.js，出口为dist/bundle.js。

3 运行程序

将打包成功之后生成的main.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>webpack初探</title>
    <script src="../dist/main.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
</body>

</html>

运行成功！

在这里插入图片描述

可以看出，webpack将浏览器尚不能承受的es6高级语法转化为了浏览器可以识别的语法，这一点十分的有用。这使得我们的网站只需要一个app.js通过es6语法引入所有需要的js文件，接着通过webpack打包为bundle.js，在html文件引入这个bundle.js即可(理想状态下)，十分的简洁。