webpack的基本构建 （开始）

webpack构建的基本步骤

创建项目文件夹

我这里是创建了一个叫 webpack-build 的文件夹

• 将文件夹拖到vscode中并且创建 dist和src两个文件夹
  
  如图所示：
• 【src文件夹用于存放项目源代码，里面分别放有css js images index.html和main.js 】(index.html是 项目首页 ---- main.js是 我们的js入口文件)
• 【dist文件夹为项目打包后输出后所存放的地方】

新建终端

• 输入 $ npm init -y 创建一个package.json文件
  
  该文件的主要作用是管理本地安装的包

在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json

。

接下来我们尝试将main.js打包引入dist中

先写个console.log

• 然后在终端中输入

$ webpack  ./src/main.js -o ./dist/bundle.js --mode development
//          要打包的文件的路径 - 打包好的输出文件的路径

请注意webpack的版本和所写的路径是否正确，我使用的是webpack4
而webpack3用的是

$ webpack  ./src/main.js ./dist/bundle.js

这里是将我们的main.js文件打包到bundle.js中

成功后如下图所示

• 之后在index.js中引入bundle.js
  

• 打开index.html后看到
  
  证明成功把main.js打包引入到bundle.js中

为了方便 我们将使用webpack-dev-server来实现自动打包编译的功能

• 在我们是在项目中，本地安装的 webpack-dev-server ， 所以无法把它当作脚本命令，在powershell 终端中直接运行（只有那些安装到全局 -g 的工具，才能在终端中正常执行）
• 若要使用webpack-dev-server我们必须现在本地项目中先安装好webpack

在终端中输入

$ npm i webpack -D

webpack安装好后安装webpack-dev-server
在终端中输入

$ npm i webpack-dev-server -D

• 安装完成后我们需要在根目录下创建一个叫webpack.config.js的配置文件
  

当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：

1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
2. webpack 就会去 项目的 根目录中，查找一个叫做 webpack.config.js 的配置文件
3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；

• 在配置文件中写入

- //由于webpack是基于node进行构建的，所以node代码都是支持的
const path = require('path')


module.exports = {
    entry: { //入口，表示webpack要打包的文件
        vendor: path.join(__dirname, './src/main.js')
    },
    output: {
        filename: "bundle.js", // 打包好的文件的名字 一般都是使用bundle
        path: path.resolve(__dirname, "./dist") // 打包好的文件输出到的路径
    },
    mode: "development",
    module: {
        rules: []
    },
    plugins: [],

}

将打包文件与引入文件进行绑定

怎么使用webpack-dev-server

既然我们都安装了webpack-dev-server 那我们如何去使用它呢？

• 如果直接在终端输入 $ webpack-dev-server 会发生如下状况
  
  可以看到提示说没有webpack-dev-server这条命令
  但是我们使用webpack就可以成功

• 接下来我门要在package.json模块描述文件里面为我们的webpack-dev-server添加功能

• 在package.json中使用scripts字段定义脚本命令：
  

• 接下来我们就能通过在终端输入$ npm run dev使用我们的webpack-dev-server了
  
  注意： 在webpack4 中除了要在本地项目中安装webpack之外同时还要安装webpack-cli 而webpack3不用安装即可成功使用

• 在终端输入$ npm i webpack-cli -D进行安装

  最后就可以成功使用webpack-dev-server了
  
  使用webpack-dev-server工具后每次刷新都会自动刷新重启webpack 从而会更加方便

本次通过大佬的讲解所写的，若有不对的地方请多多谅解

关于webpack的更多内容将在下一篇文章进行讲解

阿里嘎多