1.安装webpack依赖
npm init //初始化，创建package.js
npm install --save-dev webpack //在项目中安装依赖包
npm install -g webpack //全局安装
2.回到原文件夹，创建两个文件夹，src存放源文件，dist存放打包后的js文件（供浏览器读取），创建index.html
项目结构.png
src里创建script及style两个文件夹，用于存放脚本及样式。
script里创建main.js(作为文件入口)。
3.配置文件
回到原文件夹，创建webpack.config.js
module.exports={
entry: __dirname + '/src/script/main.js'，//文件入口，最好使用绝对路径
output:{
path: __dirname + '/dist/js', //打包后文件存放的地方
filename:'bundle.js' //打包后的文件名
// filename:'bundle-[hash].js' //亦可添加hash值到打包文件中(避免缓存)
}
}
注：“__dirname”是node.js中的一个全局变量，指向当前脚本所在的目录。
注：若修改默认文件名(webpack.config.js)，则需要在运行webpack时指定配置文件名，即webpack --config 修改后的文件名
4.打包
- 全局安装——只需在终端输入webpack
- 非全局安装——需执行命令node_modules/.bin/webpack
查看dist下是否生成bundle.js，以判断webpack是否生效。
webpack运行成功.jpg
- 自定义打包命令
在package.json中对script对象进行相关设置：
"scripts": {
"start":"webpack"
}
直接运行npm run start
注：start / stop/test 是npm特殊命令，可省略‘run’，直接执行npm start / npm stop / npm test即可。
webpack参数其他配置
package.json文件
“script”:{
"webpack":"webpack --config webpacke.config.js --progress//打包过程 --display-module//打包模块 --colors//打包字彩色 --display-reason//打包原因"
}
多个入口配置
module.exports={
entry:{
main:__dirname + '/src/script/main.js',
a:__dirname + '/src/script/a.js'
}
output:{
path: __dirname + '/dist/js',
filename:'[name]-[hash].js'
// filename:'[name]-[chunkhash].js' //MD5算法,确保每个文件的版本号不同
}
}
//输出： ./dist/js/main.js , ./dist/js/a.js
