The road to the Vue（五、使用webpack)-优快云博客

这篇博客介绍了如何安装和使用Webpack。首先，通过npm或cnpm安装Webpack及CLI。接着，在项目中创建模块文件和入口文件，配置webpack.config.js进行打包。Webpack将JS模块打包成bundle.js，并在index.html中引入运行。注意配置文件中entry和output的设置，以及使用webpack --watch实现文件变动监听。

一：安装Webpack

简介：WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用(把ES6规范的代码打包编译成ES5规范的代码，让所有浏览器都能运行)

安装命令：

npm install webpack -g 如果不行就换cnpm
npm install webpack-cli -g 如果不行就换cnpm

安装完两个之后再查看版本信息如果单安装第一个立刻查看版本信息的话会提升没安装webpack-cli,原因是 webpack4+版本（还需要安装 cli），因为webpack 4将 cli 分离出来了
测试安装成功：
webpack -v
webpack-cli -v
在这里插入图片描述

二、使用webpack

1、创建项目 (可直接创建文件夹并用idea打开)

2、创建一个名为modules的目录，用于放置JS模块等资源文件

在这里插入图片描述

3、在modules下创建模块文件，如hello.js 用于编写JS模块相关代码

//暴露一个方法
exports.sayHai = function () {
    document.write("<h1>潮汕奴仔在线学Vue</h1>")
}

4、在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性

//引入js类 通过生成的对象 调用类中的方法
var hello = require("./hello");
hello.sayHai()

5、在项目目录下创建 webpack.config.js 配置文件，使用webpack命令打包

module.exports= {
//    程序入口
    entry:'./modules/main.js',
//    打包输出
    output:{
        filename:'./js/bundle.js'
    }
}

在这里插入图片描述

6、新建index页面引入打包好的JS文件并在浏览器运行查看效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--前端的模块化开发-->
<script src="dist/js/bundle.js"></script>
</body>
</html>

在这里插入图片描述

注意点：

1、关于webpack.config.js的配置文件

entry：入口文件，指定WebPack用哪个文件作为项目的入口
output：输出,指定WebPack 把处理完成的文件放置到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如热更新、代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后直接打包(类似热更新)