入门webpack-Demo1
1、安装node环境
检查是否安装成功
2、准备一个项目文件夹,进入其根目录
npm init
初始化文件夹,产生一个package.json
文件,如图
3、进入文件夹,安装webpack和webpack-cli
npm install webpack webpack-cli
/ npm install webpack webpack-cli -d
/npm install webpack webpack-cli -g
(-g是全局 -d是局部 )
在package.json
的依赖文件中出现webpack
和webpack-cli
4、webpack必须的文件(入口文件,所处理后导出的文件,配置文件)
①entry部分(作为入口文件)
在项目文件下创建一个src
文件夹,存放源代码(编译前)的文件
为了项目目录清晰,分为js
部分和html
部分
在js部分创建一个index.js
,作为实际的编译入口文件
②output(作为导出文件)
在项目文件下创建一个dist
文件夹,存放未来将要导出(编译后)的文件
③webpack.config.js
在项目根目录下创建一个名为webpack.config.js
的文件,专门配置webpack
建好后项目结构如图:
5、进入webpack.config.js,指定最基本的配置(入口、出口、编译模式)
webpack.config.js
文件
const path = require('path') //path为node中的文件路径模块,要用其中的方法来配置出口的文件路径
module.exports={
mode:'production', //选定模式(开发模式)
entry:'./src/js/index.js', //选定入口文件
output:{ //配置出口路径及文件名
path:path.resolve(__dirname,'dist'), //__dirname为项目磁盘目录,将出口文件存放到项目文件的dist文件夹下
filename:'index-dist.js' //可重命名导出后的文件名字
}
}
6、运行webpack
进入项目根目录,运行node_modules/.bin/webpack
(实际上是去项目内的node_modules的文件目录下找到指定文件来运行)
发现在指定的dist目录下出现了index-dist.js
即编译成功
7、简化编译代码
通过node_modules/.bin/webpack
来运行太过繁琐
可以在package.json
中的scripts
中配置命令及对应的响应
比如,将node_modules/.bin/webpack
这个响应放到dev
命令下
dev:"node_modules/.bin/webpack"
如图所示:
现在运行npm run dev
即可执行node_modules/.bin/webpack