『Vue』webpack.config.js和package.json的配置

在这篇文章开始前，默认观看此篇文章的朋友们已经安装好了全局的webpack

• 关于webpack，是一款模块化打包工具，能够处理开发中各种js文件之间复杂的依赖关系。
• 现在的js文件使用了模块化的方式进行开发，但是会有一个问题如果直接在html文件中引入这些js文件，浏览器是识别不了的。
• 我们正需要通过webpack打包工具，对多个js文件进行打包，并且会处理所有模块之间的关系，最后合并成一个js文件。

配置几个js文件，利用es6进行模块化的导入和导出，通过webpac命令打包

一、准备工作（创建文件和文件夹）

dist文件夹：用于存放打包后的文件

src文件夹：用于存放我们写的源代码

• main.js：项目的入口文件

​ //使用es6语法导入
import {sum,mul} from './mathUtils.js'​
console.log(sum(20, 30));
console.log(mul(20, 30));

• mathUtils.js：定义一些数学函数

function sum(num1,num2) {
  return num1+num2
}

function mul(num1,num2) {
  return num1*num2
}

//导出
module.exports={
  sum,mul
}

index.html：首页文件（页面展示）

二、在终端使用webpack命令打包 main.js和 mathUtils.js 两个文件

: 通过webpack命令 将main.js这个文件打包到dist下，并命名为bundle.js

webpack ./src/main.js ./dist/bundle.js

如下图，文件已经打包好存入dist文件夹下

为什么只需要打包main.js这一个文件，而不是将mathUtils.js文件一起打包了？

：原因是webpack会自动处理js文件之间的依赖关系，当运行到main文件中的代码时，它会发现导入的mathUtils这个文件，一并打包。这就是webpack的好处之一

三、有没有更好的方法简化打包命令？每次打包都要输一长串，而且还要考虑路径

：答案是有的。

新建 webpack.config.js 配置文件（与index文件属于同一级目录）

2、在 webpack.config.js 文件中输入以下代码

module.exports={
  entry:'./src/main.js',
  output:{
    path:'',
    filename:'bundle.js'
  }
}

• entry：入口，可以是字符串、数组、对象，这里我们只有一个入口，所以写一个字符串即可

• output：出口，通常是一个对象，包含至少两个属性，path和filename

• path：绝对路径，我们将打包好的文件通过这个路径保存到需要的文件夹下

• filename：文件名，打包好的文件名，字符串形式

3、在终端使用npm init命令,目的是需要用到node下的path包，并利用这个包的方法动态获取路径

执行命令后，我们在此处随机键入一个名字（meetwebpack）

• 接下来通过回车键直到结束
  
• 结束后会生成一个package.json文件
• 
• 查看一下其中的代码

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

• name：名字
• version：版本号
• description：描述
• main：主文件
• scripts：脚本
• author：作者
• license：许可

这个文件有什么作用？

在项目中，我们需要依赖node环境中的包时，就需要建一个这样的文件

四、在webpack.config.js文件中引入这个包,再利用包中的方法 resolve使用 __dirname

//引入path语句
const path=require('path')

module.exports={
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  }
}

• __dirname：表示当前文件的绝对路径
• resolve：拼接URL地址，将当前文件的绝对路径与dist文件夹拼接起来

配置webpack.config.js的目的是将入口和出口放到一个配置文件中，之后在终端输入webpack命令即可完成打包，而不用在webpack命令后输入一长段URL地址

：完成webpack.config.js的配置后，简单一看这样很不错了。但实际上，并不建议这样使用

1. 原因是无论通过cmd进入控制台还是在编译器终端使用webpack命令，都是全局的。
2. 假设我们从某个服务器中拿到一个3.版本的webpack打包好的文件，但是我们安装的是全局webpack并且与之对应的版本不同，最后完成对代码的修改重新打包时就会出现错误
3. 为了解决这个问题，需要在控制台或者编译器终端安装一个本地webpack

控制台安装，跳转到指定目录下（需要用到webpack的文件夹下）（这将是局部安装）

 cd 目录
 npm install [email protected] --save-dev

webstorm编译器终端安装

安装完成之后，会在本地生成一个node_modules包，并且在package.json会多出一段代码，它代表是在开发时依赖这个webpack，当在服务器运行时便不再需要了

最后，在package.json中的scripts下新建"build"，在终端使用 npm run build这个命令，它的好处会首先查看本地有没有安装webpack，相较于直接使用webpack命令，有很大的优点。