1、为什么使用webpack
webpack可以将后端的代码变成浏览器可以读懂的代码,如果用后端的方式写前端代码的话,浏览器无法识别,因为没有模块化的体系,用后端的方式写前端的代码可以更加模块化。
webpack a.js bundle.js(这个是打包后的文件)
2、webpack的安装与配置
- 安装node(因为webpack在node环境下)
-
(1)npm install webpack -g (用全局的方式)
-
(2)进入项目 npm init -y,生成了package.json之后, npm install webpack -D / npm install webpack --save-dev(这样做是为了匹配webpack版本,防止在别的电脑上用不了)
3、运行方式
1、node_modules/.bin/webpack 1.js bundle.js(这样会报错,原因是windows系统中要用反斜杠)
2、node_modules.bin\webpack 1.js bundle.js(这样会报错,原因是该命令适用于低版本,而本地的webpack版本是最新的版本)
3、.\node_modules.bin\webpack .\1.js -o .\bundle.js(这个是正确的命令)
4、如何去掉下面的报错呢:在根目录上创建一个webpack.config.js文件,然后在module.exports 里设置:mode:‘development’ 这个参数就好了。
module.exports = { mode: "development" };
tips:这个执行代码比较长,我们选择在配置文件里自定义一个变量,里面保存这个执行代码,用的时候直接调用,我们一般写在一个文件里webpack.config.js里面
4、entry和output 多入口和多出口
module.exports = {
mode: "development",
//入口
entry: {
home: "./js/home.js",
signup: "./js/signup.js"
},
//出口
output: {
filename: "[name].bundle.js",
path: __dirname + "/dist" //dirname是node中的特殊变量,当前这个文件
}
};