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

末蓝、 2023-05-31 03:10 5阅读 0赞

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