前言与背景

自软件研发从业以来一直奔跑在后端，从C/C++到Java最后到各种自主运维和全局研发控场，没有清晰原理之前心理总觉着少点什么。另因为新冠疫情的影响，也为我提供了更多的学习时间。编写这篇博客确实也是相当的“曲折”，一直想能有时间做一些总结，让跟我一样，也对webpack的神奇有疑惑的小伙伴能够释疑。初衷很简单，自己在使用vue.js开发前端项目，包括辅助团队小伙伴开发项目和攻克难题的经验之谈，但不写成文章只能将理解烂在心里。然而我却是那种要“知其然更需知其所以然”而且喜欢刨根问底的人，因此，希望这个系列能陆续完善。若有错误之处也是希望大家不吝赐教，在评论区说出自己的想法，看到后会及时回复。

前置准备

项	版本
vscode	1.42.1
node	12.4.0
cnpm	6.1.1
webpack	4.41.6
webpack-cli	3.3.11
webpack-dev-server	3.10.3
url-loader	3.0.0
html-webpack-plugin	3.2.0
css-loader	3.4.2
style-loader	1.1.3
less-loader	5.0.0
sass-loader	8.0.2
node-sass	4.13.1
babel-core	6.26.3
babel-preset-es2015	6.24.1
babel-loader	8.0.6
@babel/core	7.8.6
@babel/plugin-transform-runtime	7.8.3
@babel/runtime	7.8.4
@babal/plugin-proposal-class-properties	7.8.3
@babel/preset-env	7.8.6
vue	2.6.11
vue-loader	15.9.0
vue-template-compiler	2.6.11

一、安装vscode

略

二、安装node

略

三、安装cnpm

全局安装cnpm，建议开启root权限

npm i cnpm -g

四、安装webpack4

cnpm i webpack -g

1.建立demo项目结构

webpack_base01
- src
- - index.html
- - index.js

建议使用vscode创建，方便后续管理

2.查看webpack版本

版本稍有不同，请查看官网，并自行对比。另外，webpack4开始，需要配套安装webpack-cli组件，因此，选择no，重新全局安装webpack-cli。

3.打包准备

3.1 项目初始化

通过终端(请使用vscode的终端，比较直观)进入webpack_base01根目录，执行以下命令：

cnpm init

生成package.json文件，如下图所示：

3.2 添加html文件——index.html

新增index.html，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="show"></h1>
    <script src="./index.js"></script>
</body>
</html>

新增index.js文件，添加如下内容：

document.getElementById("show").innerHTML = "<h1>Show me</h1>";

此处还尚未用到ES6的语法import因此不存在浏览器无法解析的问题，直接用webpack在终端打包，webpack4会自动寻找src目录下的index.js文件，并将打包后的文件，自动新建dist文件夹，并默认该目录下的main.js文件就是打包生成的文件。注意点：

src下的index.js文件一定要存在，否则报错。运行时如果出现webpack的相关警告是因为没有指定模式，因此无需担心。指定开发模式命令为：webpack --mode development。

3.3 新增开发模式配置

在package.json文件中的scripts对象下，新增一条配置，最终如下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development"
  }

3.3.1 npm run dev开发模式运行

在终端执行

npm run dev

相当于执行上一小节配置文件中的命令：

webpack --mode development

将index.html引入的js文件修改为刚才生成的main.js，这样打开index.html可以看到代码已经生效。至此，webpack的作用为：转换高级语法为浏览器可识别的语法，兼容浏览器

3.4 webpack的配置文件

在根目录建立 webpack.config.js文件，文件名固定，否则webpack打包时无法找到。输入配置，如下所示：

const path = require('path')
module.exports = {
	// 入口
    entry: path.join(__dirname, './src/main.js'),
    // 打包后的出口文件
    output: {
        path: path.join(__dirname, './dist'), 
        // 打包后的出口文件名
        filename: 'bundle.js'
    }
}

参数说明： entry: 打包的入口文件 output: 打包后的出口文件

运行打包命令：

npm run dev

最后生成dist文件，最终将原main.js文件打包生成为bundle.js文件。同时将index.html文件引入的js文件改为bundle.js，打开页面，正常显示。

至此，webpack4的打包已经正常运行，下一节将描述webpack-dev-server动态自动打包功能。

代码下载地址

github.com/Cavan2477/w…

[webpack教程] (一) 初探——从零开始