搞定webpack4.x 配置系列（一）

叁歲伎倆 2021-09-17 03:34 300阅读 0赞

## **1 首先我们要知道 webpack 官方文档：** ##

中文地址：[https://www.webpackjs.com][https_www.webpackjs.com]  
英文地址：[https://webpack.js.org/][https_webpack.js.org]

## **2 要清楚 webpack 是什么 ？** ##

官方介绍说：  
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。  
我给大家提取下关键词 ：  
第一： 是针对于现代 JavaScript 应用程序的静态模块打包的。（ JavaScript ）  
第二： 它会将这些模块 打包成一个 或者 多个 我们需要的 打包后的 JS 文件

## **3： 在开始前你需要先理解四个核心概念：** ##

*  入口(entry)
 *  输出(output)
 *  loader
 *  插件(plugins)

这边文章我们先介绍前面两个【 入口(entry) ，输出(output) 】

接下来需要我们动手去敲命令及代码的：  
1先安装 webpack ( 假设你已经安装了 node npm cnpm 了 )

cnpm install webpack webpack-cli -g       // 全局安装 webpack4.x

接下来 我们可以建一个空文件夹 （ app ）

cd app         //  终端进入我们的文件夹

npm init      //  初始化项目  这里可以一路回车

这里我们就生成了一个 package.json 文件

cnpm install webpack webpack-cli -S     // 生成依赖文件（ node_modules 文件夹）

webpack4 打包相比之前的版本 有个变化 ，它有个默认的入口 ，  
在app里新建一个文件 src/index.js 。这点很重要 这是规定 ！  
我们可以在 index.js 里面打印下

console.log("我今天学习了webpack4");

这样的话 我们就可以打包了 ， webpack4 打包也很简单 。

webpack     //  直接输入webpack 回去就可以了 ，执行打包了 ！

这里我们就可以看到文件了 多个 dist/main.js文件了 ， 这就是 webpack的默认出口 ！  
当然我们可以修改这些配置 ： 根目录新建 （webpack.config.js）

//  path 它是一个 Node.js 核心模块，用于操作文件路径。
    const path = require('path');      
    
    module.exports = {
        entry: './src/index.js',                     //  这里是我们入口文件配置
        output: {                                      //  这里是出口文件配置  
            path: path.resolve(__dirname, 'dist'),     
            filename: 'main.js'
          }
      };

这里我在说个 项目启动及打包命令配置

webpack --mode production       //  打包成 - 生产环境
    webpack --mode development    // 打包成 - 开发环境

当然这里我们不需要每次都去执行这么长的命令，我们可以在 webpack.json 里面配置 ：

"scripts": {
        "start":"webpack --mode development",
        "dev": "webpack-dev-server --open --inline"
      },

这里我们需要一个 安装服务端环境

cnpm install webpack-dev-server -S

然后需要在 webpack.config.js 里面添加配置

const path = require('path');
    
    module.exports = {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
          },
          devServer:{
              contentBase: "./dist",   //   指定的目录
              inline: true             // 修改会自动更新
          }
      };

到这里我们就可以 启动 npm run dev 了 ，需改 index.js 文件 打包后的文件也更新了 ！

**未完成 … 待续**

[https_www.webpackjs.com]: https://www.webpackjs.com
[https_webpack.js.org]: https://webpack.js.org/