webpack 4.x的入门详解(强势踩坑)

学习Vue.js框架有一段时间，理应进入前端工具的学习。于是按照网上的教程和各方资料，开始接触webpack构建工具。现在的时间点是webpack 4.x版本。而网上大多数都是3和2甚至是1的版本，与4版本的配置方法具有很大差异。所有根据每一次配置运行后的报错，硬生生的啃出这个入门详解

安装webpack

多余的话也不说了，直接开始操作：

• 首先我们需要全局安装npm install webpack -g，这样的话，在任意文件夹下都可以使用webpack命令。当执行该操作后，便在你的安装路径\npm\node_modules创建了webpack文件夹，里面存储了全局安装的包，包括刚刚全局安装的webpack
  

  

  这里新建一个文件夹做演示

• 然后我们在main.js写一行代码，并尝试用webpack打包到dist中:webpack ./src/main.js ./dist/bundle.js。然而发现未成功，但并没有报错。在我翻阅了字典后，意思如下：一个依赖于webpack的CLI包必须被安装，巴拉巴拉，你想安装webpack-cli还是webpack-command？
  

  

  然后发现有提示

• 它提示的npm install webpack-cli -D，意思是安装到项目本地依赖，可是项目本地并没有安装webpack，所以我们安装到全局，npm install webpack-cli -g。在安装好后，我们还是继续执行webpack ./src/main.js ./dist/bundle.js。发现报了一个警告和一个错误，逐步分析：
  

  

  一个警告和一个错误

• 警告内容翻译过来，是指我们在打包时没有指定mode（模式），有两个模式。一个是development开发者模式和production生产模式。我们加上后再试试webpack ./src/main.js ./dist/bundle.js --mode development。

错误依然存在

• 错误依然存在，但是我们发现它的确有一个打包的过程，我们再看看dist文件夹中的确生成了main.js文件，虽然我们指定生成的是bundle.js文件。我们还是引入这个文件试试。

  
  
  

  依然生成了文件

• 虽然成功的输出了我们刚刚写的代码，但是里面错误指向了我们没生成的bundle.js文件

  
  
  

  但是还是有错误

• 所以需要分析刚才打包错误的原因，似乎是不认我们制定的打包文件输出路径。因此我去找到了webpack4版本的资料，根据资料说明，webpack4似乎已经默认将打包的文件放在项目目录下的dist文件下，那么按照网上大多数的教程所说，前面写输出文件路径，后面写打包问价路径的方法是不行的。因此我们删除掉刚刚生成的打包文件，再试一次
  

  

  刚才的报错

• 这一次我们输入：webpack ./src/main.js --mode development。这一次成功了！而且运行index.html文件，在控制台输出了我们写的代码，且没有报错，所以我们的确打包成功了！
  

  

  果然不需要指定打包文件路径

webpack配置

1. 虽然webpack打包成功了，但是实际项目远没有这么简单。我们现在依靠的是全局的webpack打包，因此我们也不能根据项目实际的情况写配置文件。
2. 因此我们在项目本地安装一下webpack和webpack-cli。首先，我们需要初始化项目一下npm init -y，生成package.json文件，来配置脚本命令（有什么作用，我就不必多说了把，注意项目名称不能有中文和大写哦），然后npm install webpack webpack-cli -D。
3. 在这里再提示一下，练习的文件夹，最好不要叫做webpack，因为这样在npm init -y时生成的package.json文件name字段会有webpack，这样会导致安装不了项目本地的webpack

• 因为我们每次打包的时候，都需要指定mode，十分麻烦，因此我们可以在package.json文件的scripts一栏，添加运行脚本，来节省不少事。

  
  
  

  现在就开始配置

• 我们现在再试试本地的webpack命令，由于配置了脚本，所以我们运行的是npm run start。这里的start等价于运行webpack --mode development。
  

  

  发现依然报错

• 分析错误原因，是无法找到打包的源文件，因此，我查看文档后，发现在本地运行webpack时，需要在项目根目录配置一个名为 webpack.config.js,并配置文件

module.exports = {
    entry:'./src/main.js',
    output:{
        //path:'这里输入绝对路径',
        filename:'bundle.js'
    }
}

这里说明一下内容：这里配置了一个打包的接口信息，输出的文件源路径我们需要配置（刚刚的错误就在于没有配置路径），output用来配置输出的文件，因为，webpack4是默认将打包文件输出到dist的文件下，但若要输出到别的路径下，记得使用绝对路径。filename可以指定输出的文件名。

• 这个时候再运行npm run start
  
  

  打包成功，鼓掌掌！！