【笔记】webpack4.0教程_配置详解_图文_新手入门_快速上手

时间：2022-05-30 08:33:07

前言

这篇笔记会从node安装开始，到搭建基础的webpack环境为止。中间每一步的配置和遇到的术语、名词，我都会做简单的解释。
同时，这篇博文是一篇记录我学习webpack的过程笔记，因为我也在学习过程，如果有记述错误之处，欢迎指正。
【注：全程系统环境为 Windows，webpack 版本号：4.8.3】

一、安装所需软件

安装node

node：node是一种javascript的运行环境，能够使得javascript脱离浏览器运行（不做重点介绍）。

  • 1.打开下载链接下载安装包：点击下载
    【笔记】webpack4.0教程_配置详解_图文_新手入门_快速上手

  • 2.安装好之后打开 命令提示符 分别输入

node -v
npm -v

【笔记】webpack4.0教程_配置详解_图文_新手入门_快速上手
这里可以看到刚刚安装的node的版本号和npm的版本号（npm是node的附属品）

使用 cnpm

npm：npm（Node Package Manager）是一个基于 node 的包管理器。
包：凡是我们在前端项目中引用的文件，都可称为包（Package），比如JQuery、Bootstrap、Underscore。通过 npm 我们可以很方便的下载我们需要包的指定版本或者最新版本。我们要使用的 webpack 就是一个包。
cnpm：cnpm是淘宝团队做的 NPM 镜像，为什么要做使用 cnpm ？因为国内网络从npm 包普遍会很慢，所以要使用 cnpm

  • 1.打开 命令提示符 ，输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 2,检验cnpm代替成功：命令行输入：
cnpm -v

只要不提示 不是内部或外部命令 ，就代表你可以使用 cnpm 了。

二、初始化并安装 webpack

初始化 npm

  • 1.选择一个你准备创建前端项目的目录，按住 shift 键点击鼠标右键—>选择 在此处打开命令窗口
  • 2.输入 npm init -y 在当前目录初始化 npm 并且使用默认配置，此时会在该目录下创建有个npm配置文件 package.json

了解 webpack

首先，简单了解一下webpack：先看官网的介绍图。
【笔记】webpack4.0教程_配置详解_图文_新手入门_快速上手
webpack：webpack的作用就是把我们项目中所有需要的资源合并打包到一起。官方介绍就是让一切变得简单，具体想深入了解webpack的特点，推荐阅读官方文档：

安装 webpack

这里，我们需要明确一点，webpack属于一个npm的包，所以使用npm进行安装。

  • 1.打开命令窗口，输入
cnpm install webpack webpack-cli --save-dev

回车后就会在当前目录下安装webpack，并且会在该目录下多出一个文件夹 node_modules 后续，你通过 npm 安装的所有包都会被放在这个文件夹中。

  • 2.打开 package.json , 看到有如下三行，就代表以及安装成功
"devDependencies": {//开发模式
    "webpack": "^4.8.3",//插件名和版本号
    "webpack-cli": "^2.1.4"//插件名和版本号
}

需要补充的是，刚才输入的 --save-dev 的含义是：
①将所安装的包分类到开发模式下
②将安装过的包写入到 package.json 配置文件

三、使用 webpack

创建项目并使用 webpack 打包

  • 1.首先，创建如下的目录结构和文件
    【笔记】webpack4.0教程_配置详解_图文_新手入门_快速上手

  • 2.其次，每个文件中的代码如下
    ./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 src="./dist/main.js"></script>
    <!-- src引入的文件将在接下来由 webpack 打包创建 -->
</body>
</html>

./src/index.js：

import {name} from './init';//引入 init.js 存于 name ， (js后缀可以省略)

alert(name);

./src/init.js：

var name = "newApp";

export {//ECMAScript 6 语法 ， 向外暴露接口供其他文件调用时使用
    name//将变量 name 指定为向外暴露成员
};
  • 3.在当前目录下—>按住 shift 点击鼠标右键—>选择 在此处打开命令窗口—>输入：
npx webpack

这一行的含义是启用 webpack 进行打包。打包过程中会提醒错误，忽略掉就好，这是因为没有选择打包模式，虽然提示了错误，但 webpack 默认会采取生产者模式打包。

  • 4.启动 index.html ， 此时会在浏览器弹出输出 “newApp”。
    至此，我们已经掌握 webpack 的安装-基础使用。

*【练习 】使用并打包 JQuery

通过这个小练习，目的是为了大家理解包（Package）这个概念，新手往往会在这里有混淆，同时，还有一个目的就是接触 es6 语法。
我推荐在看完我这篇笔记后，去了解并熟悉一下 es6 的使用。

  • 1.使用 npm 安装 jquery 包。在你项目根目录下启动 命令窗口 ， 输入
cnpm i jquery --D

这行命令中， i 是 install 的缩写。 --D 是 --save-dev 的缩写。

  • 2.修改 ./src/index.js 里的内容
import $ from 'jquery';//引入Jquery

$(function(){  
    $("body").html("Hello <b>world</b>!");  
})
  • 3.在命令行中输入 npx webpack 进行打包，然后打开 index.html ，网页中显示文字 “Hello world!” 说明 jquery
    已经使用

练习小结：

  • 我们通过npm 安装了 jquery 和 webpack ，这两个都是 npm 的包。
  • 包与包之间是平行关系，但对于开发来说， webpack 是一个工具， jquery 是项目中使用的功能
  • 我们使用 webpack 这个包来管理其他的包 （jquery）

四、深入配置 webpack

学习使用 webpack 配置文件

我们已经知道，weboack 是一个管理其他包的工具，那么想要更加灵活自如的管理其它包，我们就需要某些设置，接下来我们来创建配置文件。

  • 1.在项目根目录创建文件 webpack.congig.js 
const path = require('path');//设置路径

module.exports = {//配置正式开始
  entry: './src/index.js',//设置入口
  output: {//设置打包出口
    path: path.resolve(__dirname, 'dist'),//打包文件放在这个目录下
    filename: 'main.js'//打包文件名
  },
  module: {},//loader 相关配置
  plugins:[],//插件 相关配置
  mode: 'development'//设置模式为开发者模式
};

配置项其实也就只有五个，分别是 ： 入口 entry 、 出口 output 、Loader loader 、 插件 plugins 、 模式 mode
入口和出口，分别制定在哪里寻找项目依赖的资源文件，把资源文件打包后放在哪个目录下面。

插件：插件用来增加一些特定功能，比如，代码压缩。再比如，观察现在的项目，正个打包过程，都没有 html 文件参与进来。如果我们希望 html 文件也参与进来，就需要一个特定插件 html-webpack-plugin

了解并使用 loader

我们不详细介绍插件，但 loader 还是要讲讲。
我们前面提到，webpack 是用来打包项目依赖的资源的，但我们项目中的资源可谓是各式各样， webpack 默认只认得 js 文件，想让其他资源文件也参与进来，就需要使用 loader

接下来，我们就尝试用 style-loader 和 css-loader 来处理 css 资源

  • 1.在项目目录下启动 命令窗口 ， 输入 cnpm i style-loader css-0loader --D
    【注】这里需要注释一下，无论是 loader 还是 插件 ，相对 npm 来说都是一个包。这里初学者自己理一下关系，我们到目前为止，用到的 jquery 、 webpack 、 stule-loader 、 css-loader 还有将来要用到的 webpack 的插件，都属于 npm 的包。

  • 2.修改 webpack 配置文件 webpack.congig.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {//配置 loader
    rules: [//相关规则写在这里
      {
        test: /\.css$/,//正则表达式：根据后缀为 .css 的文件来匹配 css 文件
        use: [//匹配搭配 css 文件后，打包时使用以下 loader 来处理文件
          { loader: 'style-loader' },//loader 名称
          {
            loader: 'css-loader',//loader 名称
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  },
  plugins:[],
  mode: 'development'
};
  • 3.创建css文件： css/main.css 
html{ background-color: aqua; }

此时项目下目录结构为
【笔记】webpack4.0教程_配置详解_图文_新手入门_快速上手

  • 4/修改 js 入口文件 src/index.js 
import $ from 'jquery';
import '../css/main.css';//引入css文件

$(function(){  
    $("body").html("Hello <b>world</b>!");  
})
  • 5.使用 webpack 进行打包，打包后访问 index.html ，你会看到刚才的样式已经引用进去了。那么现在我们已经成功使用 loader 让 webpack 能够识别 css 格式的资源文件，并且打包到项目中了。

了解并使用 watch

watch：启动 watch 后 webpack 可以监听文件变化，当它们修改后会重新编译。

  • 1.打包时在 命令窗口 输入 npx webpack --watch 即可启动 watch 模式。之后再修改资源文件， webpack 会自动打包。

结束语

本笔记旨在记录自己学习过程，同时初学者参考本笔记后可以从 node 安装开始，到搭建可以使用 loader并自动打包的 webpack 环境。
我使用的 webpack 版本为 4.8.3
因为我也是初学者，如果在笔记中有描述错误或者不到位的地方，欢迎指正，我会及时修改的。
๛ก(ｰ̀ωｰ́ก)

标签：

相关文章