Webpack的简单使用

最新推荐文章于 2024-10-04 00:46:18 发布

le45

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量112

点赞数

分类专栏： webpack 文章标签： webpack 前端

本文链接：https://blog.csdn.net/qq_41805273/article/details/103393907

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先先来介绍一下Webpack,他是一个流行的前端项目构建工具，简单点说，就是一个打包工具，其提供了良好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等功能，提高了开发效率和项目的可维护性。
官方首页
然后以一个例子来演示一下webpack的基本使用，首先，先建一个项目目录，用命令行在其目录下运行npm init -y命令，初始化包管理配置文件package.json，之后新建一个文件夹，起名为src，这是我们的源代码目录。
之后在其下建立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>
    <ul style="list-style: none;padding:0;">
        <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>
    </ul>
</body>
</html>

很简单，我们要实现的是一个隔行变色的功能，在这同时会介绍webpack的使用方法，为了实现这个功能，首先先引入一下jquery，执行命令npm i jquery -s,安装它。之后再src目录下新建index.js文件，文件内容如下：

import $ from "jquery";

$(function() {
  $("li:odd").css('backgroundColor', 'lightblue');
  $("li:even").css('backgroundColor', '#a8a8a8');
});

之后就要引入我们的webpack了，执行命令npm i webpack webpack-cli -D安装相关的包。
之后建立webpack配置文件——webpack.config.js,其中初始配置如下：

module.exports={
    mode:"development"//指定开发模式
}

在package.json配置文件中，在scripts节点下新增dev脚本如下

"dev":"webpack"

这样我们就可以通过npm run dev对项目进行打包了，打包后在根目录下生成了一个dist文件夹，文件夹中有一个main.js文件，我们在index将其引用，之后用浏览器打开index.html文件，看到的页面如下：
可以看到webpack打包后生成的main.js成功生效了。这里要说明一下，因为我们并没有对webpack的入口和出口进行配置，所以其是按照默认的入口和出口进行配置的，即入口文件为src下的index.js文件
而输出文件就是上面dist下的main.js.
那么我们怎么修改入口和出口呢？
我们要在webpack.config.js中进行配置，修改代码为：

const path=require("path")//node.js下的路径处理模块


module.exports={
    mode:"development",//指定开发模式
    entry:path.join(__dirname,"./src/index.js"),//修改其可以改变入口路径
    output:{
        path:path.join(__dirname,"./dist"),//修改其能改变出口的路径
        filename:"bundle.js"//文件名称
    }
}

我们再次执行npm run dev进行打包，因为我们这里只修改了文件名称，所以我们在相同的路径下发现了一个名为bundle.js的文件，说明修改成功，而且修改index.html文件引入的script的src路径，发现效果没有变化。
之后，我们会发现一个问题，那就是我们每次修改响应文件时，都需要我们自己手动的再去打包一次，这无疑是一件很麻烦的事情，于是我们希望它能够自动打包，而为了实现这个功能，我们需要安装一个名为webpack-dev-server的模块，运行命令npm i webpack-dev-server -D安装这个模块，安装完成后，修改package.json文件中scripts项下的dev属性，将webpack改为webpack-dev-server，并且我们要修改index.html文件中script的src属性，将其改成"/bundle.js",之后重新进行打包，之后我们访问localhost:8080,看到如下界面

点击src就是我们写的页面了。
这里要说明一下：webpack-dev-server 会启动一个实时打包的 http 服务器，而且其打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的、看不见的。它是在内存中生成的。
这时候，我们又会觉得每次打包后要自己打开浏览器查看页面也太麻烦了，这时我们要安装一个能生成预览页面的模块，运行命令npm i html-webpack-plugin –D安装这个插件
修改webpack.config.js文件如下：

const path=require("path")//node.js下的路径处理模块
const HtmlWebpackPlugin = require('html-webpack-plugin')//生成预览界面

// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({ 
    template: './src/index.html', // 指定要用到的模板文件
    filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports={
    mode:"development",//指定开发模式
    entry:path.join(__dirname,"./src/index.js"),//修改其可以改变入口路径
    output:{
        path:path.join(__dirname,"./dist"),//修改其能改变出口的路径
        filename:"bundle.js"//文件名称
    },
    plugins:[htmlPlugin]//这里存的是webpack打包期间用到的插件列表

}

之后配置package.json中script下的dev，修改为

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

这里open 是指打包完成后自动打开页面，host是ip，port是端口。
因为修改了配置文件，所以这里要重新进行一下打包。执行npm run dev，这时候我们发现我们写的页面已经自动启动了，并且地址为：http://127.0.0.1:8888/
接下来介绍一下webpack的加载器，在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结
尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，比如 url-loader 可以打包处理 css 中与 url 路径相关的文件。
我们来看一张图，他介绍了loader的调用过程
loader调用过程
那么加载器如何使用呢？
这里以打包处理css文件做一个示例：
首先，运行命令npm i style-loader css-loader -D来安装处理css文件的loader,之后再webpack.config.js的module下添加下面的匹配规则

rules: [
 { test: /\.css$/, use: ['style-loader', 'css-loader'] }
]

可以看到它是一个数组，也就是说如何有多个规则的话，都写在其中就可以了，test表示文件类型，use表示要调用的loader,而且use数组中指定的loader顺序是固定的，调用顺序则是从后往前，以上面的为例，会先使用css-loader,之后再用style-loader。
最后在补充介绍一下打包处理js文件中的高级语法的方法，首先，安装babel相关的包，执行命令:
npm i babel-loader @babel/core @babel/runtime -D
之后安装babel语法插件相关的包，执行命令npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D
在项目根目录下，创建babel配置文件babel.config.js，配置如下：

 module.exports = {
     presets: [ '@babel/preset-env' ],
     plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}

之后修改webpack.config.js中的rules数组，添加规则如下：

 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

其中exclude 为排除项，表示 babel-loader 不需要处理node_modules 中的 js 文件。
具体的就不演示了，需要哪个加载器可以直接查看官方文档
之后可能会介绍一下如何在Vue中使用webpack,但可能会放在与Vue相关的专栏里，如果写了的话，会修改此文给出一个链接。
大概就是这样，如有不足或者错误，欢迎在评论中指出，回复速度应该还是蛮快的。= =