欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用webpack详细步骤

程序员文章站 2022-06-23 08:29:50
webpack网址:https://webpack.js.org1.下载并安装nodejs2.选择Add to PATH系统自动配置环境变量3.分别执行命令node -v 和npm来验证nodejs是否安装成功4.输入命令npm install webpack@3.6.0 -g(全局)和npm install webpack@3.6.0 --save-dev(局部)安装webpack,此时webpack环境就搭建好啦,我们可以使用webpack来对文件进行打包了5.在根目录下分别创建文件夹...

webpack网址:https://webpack.js.org
1.下载并安装nodejs
使用webpack详细步骤

2.选择Add to PATH系统自动配置环境变量
使用webpack详细步骤
3.分别执行命令node -v 和npm来验证nodejs是否安装成功
使用webpack详细步骤

4.输入命令npm install webpack@3.6.0 -g(全局)和npm install webpack@3.6.0 --save-dev(局部)安装webpack,此时webpack环境就搭建好啦,我们可以使用webpack来对文件进行打包了
使用webpack详细步骤
5.在根目录下分别创建文件夹src和dist创建文件index.html,然后在src下创建js文件,例如我在src下分别创建了main.js,mathUtil.js和info.js
使用webpack详细步骤
6.其中mathUtil.js中写入了如下代码并使用commenJs语法对变量进行导出
使用webpack详细步骤
info.js操作如上
使用webpack详细步骤
7.main.js用于对以上两个文件中导出的变量进行导入并使用,相关代码如下
使用webpack详细步骤
8.打开终端输入
cd 01.webpack的使用
webpack ./src/main.js ./dist/bundle
使用webpack详细步骤

对文件的打包操作完成了
想要使用npm run build来执行打包操作吗?那么我们来进行如下配置叭
1.首先我们需要在根目录下创建名为webpack.config.js(必须这个名字奥)的文件
使用webpack详细步骤
2.然后在webpack.config.js中进行如下配置
使用webpack详细步骤
3.因为path中需要获取动态的文件绝对路径,我们就需要在终端中输入npm init进行初始化
然后输入npm install然后就会生成package.json文件了,在这个文件中进行配置
使用webpack详细步骤
4.这样我们就可以使用npm run build命令就可以进行打包操作啦,完成!

本文地址:https://blog.csdn.net/weixin_50680057/article/details/109243017

相关标签: 笔记 webpack