1.安装：
npm install webpack webpack-cli -g
2.使用
1.新建项目目录"mywebpack" 2.在项目目录下新建文件夹“modules” 3.在modules文件夹下新建main.js 4.main.js的内容： var hello=require("./hello") hello.sayHi(); 5.在modules文件夹下新建一个模块“hello.js” 6.hello.js内容： //通过exports将模块暴露出来 exports.sayHi=function () { document.write("<div>hello webpack</div>") } 7.在webpack中，一个js就是一个模块 8.在“hello.js”中通过exports来导出sayHi，在main.js中通过require("./hello")来导入hello.js，并通过hello.sayHi();来使用
3.在webpack的配置
1.在项目目录“mywebpack”目录下新建一个webpack.config.js 2.webpack.config.js内容： module.exports={ entry:"./modules/main.js", //放main.js路径 //output，为打包完成后，输出的一个内容 output:{ filename:"./js/bundle.js" //打包的时候，就会把main.js模块和hello.js模块，打包成bundle.js模块 }, //module，处理各种类型的文件 module:{ loaders:[ {test:/\.js$/,loader:""} ] }, //plugins为插件，代码重用 plugins:{}, //resolve，路径的指向 resolve:{}, watch:false }
4.打包
1.在cmd中进入到项目目录下： d: cd 项目目录 2.直接在cmd中输入：webpack # 打包命令即可完成打包
5.打包报错：
[webpack-cli] TypeError: item.plugins.unshift is not a function at internalBuildConfig (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1762:26) at runFunctionOnEachConfig (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1572:27) at WebpackCLI.buildConfig (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1772:9) at async WebpackCLI.createCompiler (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1786:18) at async WebpackCLI.runWebpack (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1890:20) at async Command.<anonymous> (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:912:21) at async Promise.all (index 1) at async Command.<anonymous> (D:\nodejs\node_global\node_modules\webpack-cli\lib\webpack-cli.js:1372:13)
6.解决：
1.将webpack.config.js中的 注释掉其他，只留下enrty和output的内容, 2.webpack.config.js:
module.exports={
entry:"./modules/main.js", //放main.js路径
//output，为打包完成后，输出的一个内容
output:{
filename:"./js/bundle.js" //打包的时候，就会把main.js模块和hello.js模块，打包成bundle.js模块
},
// //module，处理各种类型的文件
// module:{
// loaders:[
// {test:/\.js$/,loader:""}
// ]
// },
//plugins为插件，代码重用
// plugins:{},
//resolve，路径的指向
// resolve:{},
watch:false
}
3.重新使用命令打包：webpack
7.打包成功
1.可以看到在项目目录mywebpack下生成一个dist文件夹 2.其下有js文件夹 3.其下有bundle.js
8.dist就是打包完成后自动生成的目录
9.看打包后的效果
1.在项目目录mywebpack文件夹下创建index.html 2.index.html内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--直接引用dist/js/bundle.js，进行使用--> <script src="dist/js/bundle.js"></script> </body> </html> 3.直接访问这个index.html的路径，就可以看到效果
10.将 webpack.config.js 中的 watch
1、watch:false 改为 watch:true,可以实现热加载， 2.重新打包，可以实现热加载 3.即修改 hello.js 中的 document.write("<div>hello webpack</div>") 中的“hello webpack”，修改为“hello webpack111”， 4.刷新页面，内容也会跟着变更
11.但是一般不这么配置
1.不在webpack.config.js文件中配置watch 2.但是打包命令使用：webpack --watch 3.也能实现同样的效果
12.