webpack安装教程（踩坑）

webpack的安装很简单，但是过程中有一些麻烦如果不知道怎么解决的话就让人很抓狂，先简单说以下安装过程。

安装过程

1.mkdir webpack-demo 新建一个项目文件

2.cd webpack-demo 进入文件

3.npm init 初始化仓库,输入一些项目信息，直接回车也可以

4.npm install webpack --save-dev 安装webpack,等待下载完成，其中--save-dev表示保存模块到本地项目中，下面图片详细解释了相关参数的意思。

--save-dev参数解析.png

5.webpack name.js name.bundle.js name.js表示自己写好的js文件，需要提前保存好。name.bundle.js表示打包好的文件，自动生成的。

6.如果提示安装模块webpack-cli记得安装，这个模块是提供webpack命令行支持的。

---

这就结束了？并没有！有好几个坑必须要说下，在解决第一个错误时可能会出现第二个错误，按步骤解决就好啦。

常见的错误

1.找不到webpack命令。

找不到webpack命令.png

-解决方法
因为webpack命令没有加入到系统环境变量中，导致无法执行。
使用npx命令会帮你执行依赖包里的二进制文件。
npx webpack name.js name.bundle.js 。

2.出现类似于Module not found: Error: Can't resolve 'name.bundle.js/name.js/./src'错误提示。

乍一看有些摸不清头脑，为啥不能识别js文件？
还有./src目录又是什么鬼？
仔细看官网文件就可以发现，官方文档里webpack的入口文件是在./src/index.js中。
也就是说我们犯了两个错误，没有把入口文件放在src目录下，第二个错误，入口文件名不是index.js。

-解决方法一
采用系统默认配置，把入口文件放在./src/index.js中，自动生成的bundle文件在./dist/main.js中。打包js文件时只用输入命令npx webpack就可以了。

-解决方法二
修改配置文件，自定义我们的入口和出口文件，在项目地址下创建webpack.config.js文件，内容为：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
///其中，entry属性表示我们要打包的js文件，filename属性表示输出的文件名，path属性表示输出文件的位置。

打包js文件时只用输入命令npx webpack就可以了。
入口文件和出口文件我们都已经定义好了。

踩坑完毕，收。。。。工