Html5和Webpack2：Webpack5打包JS和样式表-阿里云开发者社区

Html5和Webpack2：Webpack5打包JS和样式表

1. 创建资源

开始实验之前，您需要先创建实验相关资源。

在实验室页面，单击创建资源。
（可选）在实验室页面左侧导航栏中，单击云产品资源列表，可查看本次实验资源相关信息（例如IP地址、子用户信息等）。

说明：资源创建过程需要3～5分钟（视资源不同开通时间有所差异，ACK等资源开通时间较长）。完成实验资源的创建后，您可以在云产品资源列表查看已创建的资源信息，例如：子用户名称、子用户密码、AK ID、AK Secret、资源中的项目名称等。

实验环境一旦开始创建则进入计时阶段，建议学员先基本了解实验具体的步骤、目的，真正开始做实验时再进行创建。

资源创建成功，可在左侧的资源卡片中查看相关资源信息以及RAM子账号信息

2. 进入VNC实验环境

进入网页环境

1.1 资源创建成功后，我们在右侧选择切换到远程桌面。

1.2 在远程桌面页面中，点击Chromium网页浏览器。

登录RAM用户

2.1 浏览器启动后会默认打开阿里云的RAM用户登录页。在登录页面中我们点击下一步按钮。

2.2 接下来我们需要输入RAM用户的密码。密码显示在实验控制台左侧，我们点击子用户密码右侧的复制按钮。

复制完成后，我们在用户密码框中按Ctrl + V 复制密码，然后点击登录按钮

进入ECS的远程连接。

3.1 登录成功后，页面跳转到控制台，我们在控制台的搜索框中输入ECS，然后点击云服务器ECS进入云服务器控制台。

3.2 在ECS控制台中，我们找到实验创建的ECS，点击右侧的远程连接按钮。

3.3 在远程连接中选择通过VNC远程连接中的立即登录如果没有显示该选项，则可点击展开其他登录方式按钮。

登录VNC远程连接

4.1 初次登录VNC远程连接时需要先设置VNC密码。点击重置VNC密码按钮。

4.2 输入两次新的VNC密码，并点击确认。

4.3 VNC密码设置成功后，输入密码并点击确认。

4.4 VNC登录成功后会看到实验ECS的登录界面。

3. 实验环境准备

在前面的实验中我们介绍了webpack得配置和编译。通过webpack我们可以将JavaScript代码进行打包，生成新的JavaScript代码。在本节实验中，我们来学习如何利用Webpack5为前端网页打包JavaScript和样式表，以及Webpack的一些常见用法。首先我们来准备实验环境

创建网页文件

首先我们来创建项目目录，在终端中执行如下命令

mkdir src
mkdir css
mkdri dist

在./src目录中创建function.js文件为如下内容

function showMsg(str){
    document.getElementById('resp').outerHTML += '<div>' + str + '<div/>'
}
const README = "模块function.js中函数showMsg的功能: 将str参数的内容添加到id为resp的元素";
export default {showMsg, README}

在./src目录中创建conflict.js文件为如下内容

var showMsg = "Hello World";
const README = "模块conflict.js中变量showMsg的内容: 'Hello World'";
module.exports = {showMsg, README}

在./src目录中创建index.js文件为如下内容

import func from './function.js'
import conflict from './conflict.js'

在./css目录中创建style.css文件为如下内容

button {
  border-radius: 8px;
  padding: 5px 15px;
  margin: 10px;
  font-size: 15px;
  border: 2px solid #777;
}

在./css目录中创建color.less文件为如下内容

@dark: #141414;
@light: #f4f4f4;
@defbtn: #3060c0;
@lightbtn: lighten(@defbtn, 20%);
@cancelbtn: #a4a4a4;
.autocolor(@color){
    background-color: @color;
    color: if((hsvsaturation($background-color) > 60%), @light, @dark);
}
body {
    .autocolor(@light);
    button {
        .autocolor(@defbtn);
        &.light {
            .autocolor(@lightbtn);
        }
        &.cancel {
            .autocolor(@cancelbtn);
        }
    }
}

最后在项目根目录创建index.html网页文件。

<!DOCTYPE html>
<html lang="zh-CN">
<link href="./css/style.css" rel="stylesheet/less" type="text/css" />
<script src="./src/function.js"></script>
<script src="./src/conflict.js"></script>
<title>Web dev</title>
<body>
    <div>
        <button class="" onclick="showMsg('click button')">button</button>
        <button class="light" onclick="showMsg('click light button')">light button</button>
        <button class="cancel" onclick="showMsg('click cancel button')">cancel button</button>
    </div>
    <div id="resp">
    </div>
</body> 
</html>

创建项目配置文件

接下来创建node.js项目和webpack项目的项目文件。在根目录中创建package.json文件为如下内容

{
  "name": "web",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

在根目录创建webpack.config.js文件为如下内容

const path = require('path');
module.exports = {
  mode:'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

依赖资源的安装和测试

在node 项目中，安装第三方资源有两种方法，一种是通过npm i 资源名的方式，另一种是在package.json文件的devDependencies或dependencies字段设置要安装的依赖，然后通过npm i命令安装，我们在终端中执行如下命令安装依赖，并测试使用npx webpack命令编译。

npm i
npx webpack

依赖安装完毕后，按F5打开网页，发现css加载完成

4. 打包JavaScript脚本

将export属性设置到网页

在上一个实验中我们介绍了JavaScript的模块化语法，接下来我们来看如何打包多个JavaScript并在前端网页中使用。没有使用模块化语法之前，所有的JavaScript文件和前端网页中的运行环境在同一个命名空间中，因此前端网页运行环境可以直接调用JavaScript文件中的资源。

但是使用模块化之后，除了每个JavaScript模块都有自己的命名空间，同时前端运行环境也有自己的命名空间window。同时前端运行环境默认不支持import语法，这时我们需要在代码中将模块的导出函数手动复制到前端运行环境的命名空间window中。我们继续修改index.js，

import func from './function.js'
import conflict from './conflict.js'
window.func = func
window.conflict = conflict

打包JavaScript

修改完成后，我们在终端中执行如下命令进行编译和运行。

npx webpack

接下来将index.js中的两个JavaScript文件引用替换为main.js，同时将showMsg的调用修改成func.showMsg，修改index.js为如下内容

<!DOCTYPE html>
<html lang="zh-CN">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="./dist/main.js"></script>
<title>Web dev</title>
<body>
    <div>
        <button class="" onclick="func.showMsg('click button')">button</button>
        <button class="light" onclick="func.showMsg('click light button')">light button</button>
        <button class="cancel" onclick="func.showMsg('click cancel button')">cancel button</button>
    </div>
    <div id="resp">
    </div>
    <script>
        func.showMsg(conflict.README);
        func.showMsg(conflict.showMsg);
        func.showMsg(func.README);
    </script>
</body>
</html>

验证打包成果

修改完毕后通过Live Server打开index.html。可以看到两个JavsScript得文件内容合并到了一个main.js中。点击按钮发现function.js中的showMsg函数已经加载成功。

5. 打包CSS样式表

Webpack除了可以处理JavaScript之外，还可以处理样式表文件。和处理JavaScript不同的是，Webpack处理样式表的能力是靠loader来实现的。在Webpack中有两种类型的扩展组件，一种是loader，另一种是plugin，其中loader负责对某一类型的文件进行加载和打包。而plugin负责对加载好的模块进行继续处理。在处理样式表时。我们就需要loader帮助我们进行加载。

loader的安装和配置

webpack的loader是本身是node的组件，因此也需要通过npm进行安装。首先我们来看如何安装处理CSS格式的样式表的loader。在终端中输入如下命令，安装style-loader和css-loader

npm i css-loader style-loader --save-dev

安装完毕后，我们在webpack.config.js配置文件中增加module: rules:数组字段，在数组中添加对CSS样式表的处理配置。配置格式为{test:文件名的正则表达式, use:[loader处理数组]}，我们修改webpack.config.js配置文件为如下内容

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

打包样式表到JavaScript

配置文件修改完毕后，即可在index.js中使用require引用CSS样式表。我们修改index.js的文件为如下内容

import '../css/style.css'
import func from './function.js'
import conflict from './conflict.js'
window.func = func
window.conflict = conflict

修改完毕后，我们在终端中执行如下命令进行编译

npx webpack

修改index.html并测试

编译完成后，我们修改index.html为如下内容，去掉对CSS的加载。

<!DOCTYPE html>
<html lang="zh-CN">
<script src="./dist/main.js"></script>
<title>Web dev</title>
<body>
    <div>
        <button class="" onclick="func.showMsg('click button')">button</button>
        <button class="light" onclick="func.showMsg('click light button')">light button</button>
        <button class="cancel" onclick="func.showMsg('click cancel button')">cancel button</button>
    </div>
    <div id="resp"></div>
    <script>
        func.showMsg(conflict.README);
        func.showMsg(conflict.showMsg);
        func.showMsg(func.README);
    </script>
</body>
</html>

修改完成后按F5运行。可以看到Webpack将CSS也打包到了main.js中。前台网页只需要引用一个main.js文件就可以完成对JavaScript和CSS样式表的加载。

6. 打包LESS样式表

安装less-loader

除了CSS样式表，Webpack同样可以处理LESS格式的样式表。在处理LESS样式表时，需要再安装一个less-loader，在终端中执行如下命令

npm i less-loader --save-dev

loader的配置讲解

和CSS样式表相比，LESS样式表增加了一个less-loader。这也是Webpack处理loader的方式，也就是使用不同的loader链式串联的方式。处理的顺序为use字段中loader数组的倒序：以less样式表为例，处理loader为1.less-loader -> 2.css-loader -> 3.style-loader

我们修改webpack.config.js配置文件，在rules数组中增加对LESS样式表的处理配置。

const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
};

加载less文件并验证

接下来在index.js中通过require添加对style.less文件的加载。

import '../style.css'
import '../color.less'
import func from './function.js'
import conflict from './conflict.js'
window.func = func
window.conflict = conflict

修改完毕后，我们在终端中执行如下命令进行编译

npx webpack

最后通过LiveServer调试网页，会发现less格式的颜色样式表和css格式的位置样式表都生效了。

实验链接：https://developer.aliyun.com/adc/scenario/ddae04f7df0e44f492a4bbd5fa58ee85

Html5和Webpack2：Webpack5打包JS和样式表