我眼里的webpack（webpack安装与常见报错总结）

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中的特殊变量，当前这个文件
  }
};