webpack配置与使用

1 概述

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

2 webpack安装

# 全局安装webpack
npm install -g webpack webpack-cli
# 查看版本确认是否安装成功
webpack -v

3 js文件打包与css文件打包

3.1 项目初始化

npm init -y

创建src源文件夹，用于存放需要整合的js和css文件

创建common.js文件

javascript">exports.info = function(data){
    document.write(data);
}

创建utils.js文件

javascript">exports.sum = function(num1,num2){
    return parseInt(num1) + parseInt(num2);
}

创建style.css文件

css">body {
    background-color: aqua;
}

创建main.js文件，用于整合之前的文件

javascript">//引入js模块
const common = require("./common.js");
const utils = require("./utils.js");
//引入css模块
require("./style.css");

//调用方法
common.info("Hello webpack " + utils.sum(2,3));

3.2 安装style-loader和 css-loader 用于css打包

npm install --save-dev style-loader css-loader

3.3 js与css文件打包的配置文件

在webpack的目录下创建配置文件 webpack.config.js，配置如下内容：

javascript">const path = require("path");
module.exports = {
    entry: "./src/main.js", //配置入口文件
    output: {
        path: path.resolve(__dirname,"./dist"), //输出路径,__dirname为当前文件所在路径
        filename: "bundle.js" //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, //打包规则应用到以css结尾的文件上
                use: ["style-loader","css-loader"]
            }
        ]
    }
}

3.4 执行命令编译文件

# 代码会被压缩的生产模式
# webpack

# 代码不会压缩的开发模式
webpack --mode=development

3.5 测试

在webpack的目录下创建 index.html，引用生成的bundle.js文件

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

至此，可以成功看到输出内容以及样式效果。证明打包成功。

3.6 目录结构

image-20200827165653544.png

http://www.niftyadmin.cn/n/1571912.html

nginx的反向代理实例1

0. 实现效果通过本地浏览器输入域名，可以实现通过nginx反向代理的操作，跳转到linux服务器的tomcat主页面的效果。 1. 准备工作配置java环境安装tomcat，并测试是否可以正常访问配置安装nginx 2. 具体配置 2.1 在windows系统的host文件中进行…

nginx的反向代理实例2

0. 实现效果通过请求访问不同路径的url实现不同的跳转功能。例如：访问：http://62.234.149.220/edu/test.html 会跳转到 http://62.234.149.220:8001/edu/test.html。而访问：http://62.234.149.220/vod/test.html 会跳转到 http://62.234.14…

nginx负载均衡实例配置

0 效果通过访问nginx，实现负载均衡，可以以某种算法交替访问部署的多台tomcat服务器。例如：访问 http://62.234.149.220/edu/test.html ，会交替跳转到 http://62.234.149.220:8001/edu/test.html 和 http://62.234.149.220:8002/…

nginx动静分离实例配置

0 效果通过nginx的相关配置，实现tomcat请求的动态数据和 html，css，js以及图片等静态数据分离的效果。例子：在linux服务器中创建存储静态数据的文件夹，通过nginx的配置，实现对静态文件的访问。 1 准备工作…

EasyExcel的读写操作示例

0 引入依赖  <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.17</version> </dependency>  <dependency>&…

找不到gpedit.msc 的解决方法

参考：https://blog.csdn.net/qq_37904209/article/details/105753442 新建一个文本文档，名字随便取，编辑以下批处理内容，保存后将后缀名改为.bat ,右键使用管理员权限执行: echo offpushd "%~dp0"dir /b C:\Windows\ser…

ntp同步局域网下的时间

时间服务器配置查看ntp是否安装 rpm -qa|grep ntp 修改ntp配置文件 vim /etc/ntp.conf 修改授权网段，使得该网段的所有机器可以查询和同步本主机的时间 # 打开注释，并改为自己网段ip restrict 192.168.44.0 mask 255.255.255.0 nomodify notrap 集群在局…

b站视频下载和字幕下载的方法

我们经常浏览b站观看视频，遇到喜欢的时候想下载相关视频。此时，应该如何下载视频又该如何获取视频对应的字幕呢。本篇文章将具体探讨其中的步骤。希望可以帮助到有需求的童鞋。一. 视频下载说明：下载视频有多种方式，这里提供一种…