学习webpack系列之一 ---- （手动部署环境）

最新推荐文章于 2024-03-26 10:56:19 发布

vk阿木

最新推荐文章于 2024-03-26 10:56:19 发布

阅读量296

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/LizequaNNN/article/details/120330194

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

学习webpack系列之一 ---- （手动部署环境）

一、创建以及初始化项目

mkdir webpack-simple-project
cd webpack-simple-project
npm init -y
npm install webpack webpack-cli

安装webpack以及webpack-cli脚手架工具，生成package.json文件，如果是npm5以上还有package-lock.json。

初始化项目

值得一提的是，根据官方文档，这个package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

如果闲太麻烦或者不明所以的话呢，我们就取舍，只关注package.json就可以了。

二、创建基础文件

这一章讲的主题是自己手动部署webpack环境，所以所有的文件都由我们手动添加，更能明白其中的原理。

先安装lodash库，方便我们对dom进行一些操作。这是一个封装了很多方法的js库，如果有不明白的小伙伴自行查阅吧，这里不再赘述。

npm install --save lodash

创建dist文件夹，用于存放打包之后的文件；创建src文件夹，同于存放打包之前的源文件。

创建src/index.js并写入内容，用作入口文件。

import _ from 'lodash';

 function component() {
   const element = document.createElement('div');

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  // lodash 在当前 script 中使用 import 引入
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

这里通过声明并且引入lodash模块所需的依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的
bundle（也就是我们的main.js文件），并且会以正确顺序执行。
这就是使用webpack的意义所在.

创建dist/index.html并写入内容，用做出口文件。

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>起步</title>
   </head>
   <body>
    <script src="main.js"></script>
   </body>
 </html>

目前目录的情况就是：

  webpack-simple-project
  |- package.json
  |- /dist
   |- index.html
  |- /src
    |- index.js

接下来，我们打开命令行，执行 npx webpack脚本，会将我们的脚本 src/index.js 作为入口起点，也会生成 dist/main.js 作为输出。Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）：

执行webpack脚本
先无视WARNING，我们可以看到webpack已经打包成功了，接下来我们可以打开dist/index.html查看，不出意外可以看到Hello webpack的字样（就是我们在index.js里面添加的文本）。

三、使用配置文件

很麻烦对吧？经历过上面的手动配置打包，你可能会觉得很烦，但不得不说的是，你应该已经理解的webpack的基本工作原理了，接下来我们才来使用配置项，对项目进行配置模块化。

在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持配置文件。这比在 terminal(终端) 中手动输入大量命令要高效的多，所以让我们在根目录上创建一个配置文件：webpack.config.js

  webpack-demo
  |- package.json
  |- webpack.config.js // 新增这个文件
  |- /dist
    |- index.html
  |- /src
    |- index.js

我们为webpack.config.js写入配置代码：

const path = require('path'); // 引入path路径模块

module.exports = {
  // 由于我们前面打包的时候没有选择mode，现在我们把它加上，选择开发环境或者生产环境(production)，WARNING就没有了
  mode: 'development', 
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', //出口文件名
    path: path.resolve(__dirname, 'dist') // 出口文件目录
  }
};

接下来重新用新的配置文件构建一下项目，输入：

npx webpack --config webpack.config.js

输出结果
这时候打开dist/index.html文件看到的结果还是一样的，那就说明我们成功的为项目进行了模块化配置。

输出结果
值得一提的是，如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。在这里使用 --config
选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。比起 CLI
这种简单直接的使用方式，配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rule)、plugin(插件)、resolve 选项，以及许多其他增强功能。

四、配置npm script

文章进行到了这里，有小伙伴可能会问了：诶不对啊，这怎么跟我们平常使用的webpack不太一样，例如vue，我们不是只需要npm run
build 就可以直接打包了吗？为什么还要使用npx呢？

那是当然的啦，我们肯定会配置到能够供项目使用的层次的。这么一步步实践下来只不过是为了让大家对webpack有一个清晰的认识，我们现在学习的只是针对于webpack，还不涉及到其他前端框架，只要我们理解了webpack，个人认为再去使用前端框架也是轻而易举的事情。

考虑到用 CLI 这种方式来运行本地的 webpack 副本并不是特别方便，我们可以设置一个快捷方式。调整 package.json 文件，添加一个 npm script：

添加npm script
现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。注意，使用 npm scripts，我们可以像使用 npx 那样通过模块名引用本地安装的 npm packages。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本。
编译成功

vk阿木

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习webpack系列之一 ---- （手动部署环境）

学习webpack系列之一 ---- （手动部署环境）一、创建以及初始化项目mkdir webpack-simple-projectcd webpack-simple-projectnpm init -ynpm install webpack webpack-cli安装webpack以及webpack-cli脚手架工具，生成package.json文件，如果是npm5以上还有package-lock.json。值得一提的是，根据官方文档，这个package-lock.json 是在 npm
复制链接

扫一扫