webpack--指南1--打包文件配置

来源:互联网 发布:常州java程序员招聘 编辑:程序博客网 时间:2024/05/23 14:04

全局安装webpack

npm install webpack -g

1:创建一个webpack-demo文件夹,并且进入这个文件夹

mkdir webpack-demo && cd webpack-demo

2:生成package.json文件

npm init -y

此时项目结构如图:这里写图片描述
3:添加webpack

npm install --save-dev webpack

此时项目结构如图:node_modules文件夹中居然有484个文件夹
这里写图片描述
4:新建文件,结构如图

这里写图片描述
这里写图片描述

npm install --save lodash

这里写图片描述
5:利用webpack生成bundle.js文件
(1)方法一:

webpack src/index.js dist/bundle.js

(2)方法二:
新建一个webpack.config.js文件
这里写图片描述

webpack --config webpack.config.js

此时在dist文件夹中就生成了bundle.js文件;打开index.html可以看到内容

(3)方法三(在webpack.config.js文件基础上):
考虑到CLI这种方式来运行本地的webpack不是很方便,我们可以设置一个快捷方式

//package.json{...    "scripts": {        "build": "build"    },...}

运行npm run build来代替我们之前的长命令,
这里写图片描述