1.1 webpack4.0 基础配置 附源码

291 阅读2分钟

一、IDE的选择

       前端工程师一般都会选择VS code,本人有java后端的开发经验,还是习惯IntelliJ IDEA,这个软件是收费的,这里就是学习使用,要用于商业请购买正版!

二、创建工程目录

       我们可以创建一个文件夹,控制台 cd /Users/**/**/创建的文件名称,执行npm init ,本章就学习webpack默认配置,所以默认选则就行。


三、安装webpack webpack-cli

       在工程目录执行 npm i webpack webpack-cli -D 进行本地下载安装。


ps:这里有个提示npm 6.10.3 升级至 6.14.2 可以忽略。

当然我们也可以用IDE工具打开工程,查看package.json文件,查询当前webpack版本。


四、webpack打包js文件

1. 现在我们在工程目录中创建一个js文件,阅读webpack源码的朋友,可以知道webpack 默认检索js文件必须是在src文件夹下,当然后面也会介绍如何进行修改!


2.在工程目录,执行npx webpack 命令。一般IDE都会有控制台,这里我在Intellj IEDA 控制台直接执行


ps:警告中提示我们没有配置webpack 的mode默认生产环境,后续会有配置讲解说明。


我们在看下文件数据,webpack在0配置的情况下,默认创建了一个dist 文件并输出了一个main.js文件。我们在执行下js文件看下是不是会输出‘hello webpack’


3.在创建一个a.js进行模块化打包,改造如下



然后在执行命令 npx webpack 进行打包执行。


五、 HTML 引用打包的js文件在浏览器加载

这里就在src 下创建一个html 引用已经打包的js,后面会讲解使用插件打包html 并引用js.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Title</title>
</head>
<body style="background: gray">
<script type="text/javascript" src="../dist/main.js"></script>
</body>
</html>

加载运行,查看控制台输出


源码下载

创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_load_css

进入工程目录,执行 npm install -D