搞定webpack4.x 配置系列（一）-蒲公英云

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

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

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

中文地址：https://www.webpackjs.com
英文地址：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             // 修改会自动更新
      }
  };