写在前头

笔者是一名在校大三学生，近日来学习Webpack饶有兴致，所以想写下这篇文章，希望能帮助到想学习webpack的小伙伴们，如有错误，欢迎指出~

Webpack可谓是我们前端开发中必不可少的一个打包工具。它其实呢就是一个现代 JavaScript 应用程序的静态模块打包器，它做的事情就是将javascript、与其他静态文件（css、js等）组成的不同模块，将其转换和打包为合适的代码和格式供浏览器使用。

安装

要想使用webpack就必须安装这个工具，笔者用的是vscode,首先创建了以下文件夹：

然后需要在根目录终端用以下命令安装（确保安装了node.js）

npm i webpack -g
npm i webpack-cli -g  //在webpack第四版中webpack将webpack-cli分离出来所以要额外安装

因为只是做演示，所以我在这是全局安装，往往在做项目时更推荐本地安装，若想本地安装或了解更多，请点击官方文档

可用webpack -v和 webpack-cli -v可查看版本确保安装成功

再使用命令npm init -y来进行初始化,再用npm i jquery -S来引入jquery（后面要用到）

写入代码

我们将index.html和 main.js写入以下代码:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./main.js"></script> // 引入main.js改变颜色
</head>
<body>
 <div>这个人很懒什么都没有留下...</div>
</body>
</html>

main.js

import $ from 'jquery'
$(function () {
    $('div').css('backgroundColor', 'yellow')
})

这时我们在浏览器打开发现并没有发生颜色的改变且报错（意外的标志符）

这是因为遇到main.js中的import代码，这是 Es6 的语法，浏览器并不能识别，所以这时候要用到webpack对main.js进行打包生成一个浏览器可识别的文件便可以实行

打包

打包方式一

这时候我们执行以下命令便可以进行打包：

webpack .\src\main.js -o .\dist\bundle.js --mode=development

main.js是我们将要打包的文件，bundle.js是我们打包完毕后可供浏览器识别的文件，打包后注意在index.html将引入的./main.js改为../dist/bundle.js才可以变颜色

打包方式二

虽然方式一打包成功，但是显然过于麻烦，我们可以直接用 webpack 命令来进行打包，但是出现了以下错误：

ERROR in Entry module not found: Error: Can't resolve，（专业四级翻译 /手动狗头）错误，未找到入口模块，

特别提醒

如果使用webpack命令进行打包的话，官方默认webpack入口文件是 index.js , 默认打包好的文件名是main.js ,我们在目录下创建的入口文件为main.js，当我们实行 webpack 命令时找不到入口当然会报错啦。

那么这时候我们只需要将main.js名字改为 index.js，注意： index.html 中引入的文件名也要对应改变，即可使用webpack命令（为了测试打包成功我将颜色改成了原谅绿）

那要是我偏要不改名字呢？

那是真的挺秃然的，这时候我们需要在根目录下手动添加一个webpack.config.js，添加以下代码：

const path = require('path')
module.exports = {
    
    // entry 是webpack指定的入口
    entry: path.join(__dirname,'./src/main.js'),//要打包的文件路径
    // output是输出出口
    output:{
        path: path.join(__dirname, './dist'),//打包指定的文件路径
        filename: 'bundle.js' //打包指定的文件名称
    },
}

这时候我们就可以随心所欲指定需要打包的文件名了，你以为就结束了吗？执行webpack命令后发现

简而言之，你的mode选项没有设置，你需要在webpack.config.js 设置 mode 为 development

const path = require('path')
module.exports = {
    
    // entry 是webpack指定的入口
    entry: path.join(__dirname,'./src/main.js'),//要打包的文件路径
    // output是输出出口
    output:{
        path: path.join(__dirname, './dist'),//打包指定的文件路径
        filename: 'bundle.js' //打包指定的文件名称
    },
    mode: 'development' //模式设置
}

这时候就打包成功了（颜色换成了 blue ）！

写在后头

或许这篇文章对大部分人来说小菜一碟，但是如果能够帮助到别人，这也就是我写文章的初心了~

Webpack打包问题一扫而空