全局安装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来代替我们之前的长命令,