webpack_（第二章）_使用webpack的配置文件

妖狐艹你老母 2022-01-09 16:21 256阅读 0赞

webpack的配置文件  
webpack是一个模块打包工具，帮助我们把模块都打包到一起，当引入图片模块和JS模块，引入的流程和打包的方式肯定是不同的。加入引用的是JS文件，那么直接拿过JS文件来执行就可以了，假如引入的是图片文件，实际上只需要拿到图片的地址就可以了，并不需要把整个图片文件打包到js里面去。在打包的时候哪个文件才是打包的入口文件，打包出的文件放到哪里，这就需要配置文件来告诉webpack如何打包。  
当我们执行`npx webpack index.js` , 不做任何配置也能打包成功，在跟目录下会生成一个dist文件。实际上webpack团队为了方便开发者使用一直在丰富webpack的默认配置，虽然没有写配置文件，但是在用它的默认配置文件。那如果想在项目中编写webpack的配置文件，该怎么做？  
我们可以在项目目录下创建一个文件，webpack的默认配置文件名叫webpack.config.js  
我们在命令行中运行 `npx webpack` 会报错  
![在这里插入图片描述][20190620150034150.png]  
因为我们以前运行的是`npx webpack index.js` index.js的意思是让webpack打包 index.js这个文件，如果直接写`npx webpack`，那么webpack就不知道要打包的项目入口文件是哪一个，我们可以在webpack.config.js文件中做打包的配置  
使用CommonJS的语法，写一个对象，就可以在里面做配置，这些配置都是webpack提供给的配置接口

const path = require('path)
    module.exports = {   
    // entry 就是指定项目打包从哪一个文件开始打包 
      entry:  './index.js'    // webpack.config,js 和index.js在同一目录下,这样写没问题
      // output 指定打包完成之后的文件地址
      output : {
        filename: "bundle.js",   // 打包生成之后的文件名
        path:  'path.resolve(_dirname, 'bundle)'    // 默认是放在dist文件下，可以换文件夹的名字,path指的是打包生成我的文件放在哪一个文件夹下。path后面要跟一个绝对路径,直接写名字是不行的，要引入一个node的核心模块，在配置文件上面引入path : const path = require('path),引入一个叫path 的 node 的核心模块，然后调用这个path.resolve方法,  'path.resolve(_dirname, 'bundle)'中，_dirname这个node里面的变量，实际上指的是webpack.config.js文件所在的当前这个目录的路径，把它和bundle做一个结合，这样的话生成的路径就是bundle这个文件夹的绝对路径
      }
    }

以上配置好之后，就有了webpack一个标准的配置文件，这个配置文件要求我们从bundle.js打包，打包生成的文件放在bundle文件夹下，打包生成的文件名字叫做bundle.js  
运行`npx webpack` 就生成了打包文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]  
流程是当我们运行`npx webpack` 时，webpack不知道打包文件是啥，就会找webpack.config.js，根据配置文件的输出打包的流程。假设我们webpack.config.js名字改成别的，那么运行`npx webpack` 打包就会报错，因为webpack找不到默认的配置文件，默认的配置文件必须叫webpack.config.js。  
那假如我们就是不想用这个配置名字呢？假如我们的配置文件叫WebpackConfig.js文件，那么运行的时候要写`npx webpack --config WebpackConfig.js` 让webpack以WebpackConfig.js为配置文件打包。

现在我们已经掌握了webpack最基本的使用，现在对项目做一下结构优化。  
index.js文件是不能在浏览器直接运行的，必须由weback打包生成的最终的代码在可以在浏览器中运行，所以index.js是源代码，一般来说我们会将源代码放在一个叫src目录下，然后把所有的源代码放在src目录下。如下：  
![在这里插入图片描述][20190620160611997.png]  
注意的是index.html不放在src中  
因为index.js位置变了，所以要把webpack.config.js的入口文件改一下  
![在这里插入图片描述][20190620160730605.png]  
在打包的过程中我们会经常用到`npx webpack` 来打包运行我们的项目，通常vue项目和React项目运行使用的是npm run这样的命令，如何用npm scripts 简化打包代码  
我们在package.json文件,在里面会有scripts 标签配置项，我们可以在这个对象中配置一些命令：

"scripts": {
       “bundle” : "webpack"   // 当执行bundle这条命令的时候，会自动执行webpack这条命令，帮助我们打包（webpack就是打包），在命令行中运行npm run bundle 就可以帮我们打包，代替npx webpack
      }, 如果在scripts中bundle命令中使用webpack，会先到工程目录下node_modules中去找webpack，而不是找全局的webpack，所以不用写npx webpack

我们将index.html放在dist文件下，index.html中的JS指向打包后的js文件，网页可以正常运行

回忆一下运行webpack：

1.  global 全局安装webpack，运行`webpack index.js`
2.  local 局部安装webpack， 运行`npx webpack index.js`
3.  `npm run bundle` ：这个局部安装，在webpack.config.js中指定打包入口文件，然后可以在package.json文件中红配置一下npm scripts脚本就可以直接运行npm run bundle这个命令，就可以了  
    这三种都是在命令行中去运行webpack。

安装webpack的时候，我们还安装了webpack-cli这个包，webpack-cli是做什么的呢？  
它的作用就是使我们在命令行中可以正确的运行webpack这个命令，假设不安装webpack-cli这个包，就无法在命令行中运行webpack这个命令或者npx webpack这样的命令。

官网学习：  
DOCUMENTATION----> Getting Started这个目录下的所有内容

[20190620150034150.png]: /images/20220109/3c2b5763a82c45a7abdf5e2f19f46bb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20220109/ada8e32a2cb2465cb9f65052b1af1fa0.png
[20190620160611997.png]: /images/20220109/786ee367cbfd4bf1997e74353ef9541b.png
[20190620160730605.png]: /images/20220109/8ba0a7af54de4af792b8bcb1aec436f7.png