1、前提条件
在开始安装webpack之前,需要确保安装了node.js。进入node.js网址,你会看到
建议下载长期支持版本(LTS-Long Term Support),下载完后点击安装包进行安装,一直点击“下一步”即可。cmd进入命令行工具,输入node -v查看node.js的环境是否安装成功。node.js安装成功的同时,会有一个叫做npm的工具安装成功。npm(node package manager)是一个node里面内置的包管理工具。webpack是基于node来开发的,而我们安装webpack就需要使用npm。
2、两种webpack安装方式
安装webpack,需要安装webpack主包和webpack-cli
2-1、在全局安装webpack
安装命令:npm install webpack webpack-cli --global
--global参数表示在全局的环境下去安装webpack,好处是可以让我们在任何的目录下面都可以去执行webpack,但是我们其实并不推荐大家在全局里安装webpack,因为这样会使你项目的webpack锁定到某个版本里。
2-2、在本地的项目目录安装webpack
假设C:\Users\hu\Desktop\web_study\felixcourses是我的项目目录,以下操作均在该目录完成。
在本地工作目录安装webpack之前,需要去安装一个npm的包管理的配置文件:
执行命令:npm init -y,执行完毕之后,项目的根目录下会产生一个package.json文件,里面是我们项目的一些配置内容。
执行安装命令:npm install webpack webpack-cli --save-dev
安装完毕后,会发现根目录下多了node_modules文件夹和package_lock.json文件,而webpack和webpack-cli以及其他一些的依赖包都放在了node_modules文件夹下,package_lock.json里面是当前这两个包的一些依赖;同时package.json文件会增加一些配置内容,如下图:
3、运行webpack
首先,在C:\Users\hu\Desktop\web_study\felixcourses目录下新建一个02-webpack-app文件夹,在02-webpack-app文件夹下在新建一个src文件夹,src文件夹里有两个文件:hello-world.js和index.js。在02-webpack-app文件夹下新建一个index.html文件。
项目目录如下:
hello-world.js
function helloWorld() {
console.log('Hello world')
}
export default helloWorld
index.js
import helloWorld from "./hello-world"
helloWorld()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack 案例</title>
</head>
<body>
<!-- 把打包好的main.js文件引入index.html,在浏览器上打开index.html可以正确执行 -->
<script src="./dist/main.js"></script>
</body>
</html>
在项目的根目录下执行如下命令:npx webpack
执行结束后,02-webpack-app文件夹下出现一个dist文件夹,里面有一个main.js文件,这个文件就是我们把hello-world.js和index.js打包之后的结果。