安装webpack
webpack是一个前端打包工具
#要使用npm,必须先安装nodejs
//node安装完成后,打开终端,在全局安装webpack,方法如下:
npm install -g webpack
//等待安装完成......
创建配置项
使用webpack,必须设置好配置项
每个项目的依赖不一样,配置项也会不一样,所以配置项需要在项目的根目录配置:
- 首先,在项目根目录 按 shift+右键 --> 在此处打开命令窗口
- 然后输入:
npm init
- 然后连按7-8次回车,直到根目录出现
package.json
文件
配置package.json
配置package是使用webpack非常重要的一步
安装webpack依赖,在终端输入:npm install --save-dev webpack
,等待成功。
使用webpack
使用webpack进行打包,为了可以一次打包多个文件,此时还需要配置一个文件webpack.config.js
在根目录新建一个webpack.config.js
文件
//webpack.config.js
module.exports = {
//__dirname是nodejs里的一个全局变量,它指向的是项目的根目录
entry:__dirname + "/app/main.js", //入口文件路径,例如入口文件是:根目录下的app文件夹里的main.js
output:{
//设置出口文件(打包后的文件)位置
path:__dirname+"/public/",
//出口文件名
filename:"index.js"
}
}
webpack.config.js
配置完成后,使用webpack打包,直接在cmd输入webpack
回车即可。
输出的文件在根目录的public/index.js
,然后引入index.js
到你的html文件,开始疯狂输出把。
每次使用cmd,除了可以webpack回车打包以外,
还可以在package.json
里的scripts
下,添加一个属性start
值为webpack
这样以后使用就可以在cmd里输入:npm start
,跟前面输入webpack一样的效果
ps:start
是一个关键字,如果需要自定义如:fy
那么使用的就不能npm fy
,而是需要npm run fy