webpack实践之路（三）：快速上手的Demo2.0

• webpack实践之路（一）：安装
• webpack实践之路（二）：快速上手的Demo
• webpack实践之路（三）：快速上手的Demo2.0

---

上一篇通过一个小Demo我们对Webpack有了初步了解，但是它在实际开发中并不使用，而是使用Webpack的配置文件的方式进行设置。

---

一、配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立（在根目录建立）。建立好后我们对其进行配置，下面就是webpack.config.js的基本结构，无内容的标准模板。

webpack.config.js ：更多请戳我

module.exports={
    //入口文件的配置项
    entry:{},
    
    //出口文件的配置项
    output:{},
    
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    
    //插件，用于生产模版和各项功能
    plugins:[],
    
    //开发工具
    devtool: '',
    
    //配置webpack开发服务功能
    devServer:{}
}

• entry：配置入口文件的地址，支持多入口配置。
• output：配置出口文件的地址，支持多出口配置。
• module：配置模块，主要是解析CSS和图片转换压缩等功能。
• plugins：配置插件，根据你的需要配置不同功能的插件。
• devServer：配置开发服务功能。

（1）entry选项

这个选项就是配置我们要压缩的文件一般是JavaScript文件（当然也可以是CSS……）按照上一文的操作，这里要填写的是src目录下的entery.js文件。

wepback.config.js中的entry选项

entry:{
    entry:'./src/entry.js'
},

（2）output选项

出口配置是用来告诉webpack最后打包文件的地址和文件名称的。按照上一文的操作，应该打包到dist目录下。

const  path  =  require('path');

output:{
    filename:'bundle.js',                    //打包的文件名称
    path:path.resolve(__dirname,'dist'),     //打包的路径
},

因为用到了node的path，所以需要引入path
path.resolve(__dirname,’dist’)就是获取了项目的绝对路径

---

现在webpack.config.js的代码：

const path = require('path');
module.exports={
    entry:{
        entry:'./src/entry.js'
    },
    
    output:{
    	filename:'bundle.js',
        path:path.resolve(__dirname,'dist'),
    },
    
    module:{},
    plugins:[],
    devServer:{}
}

我们修改完了一些默认配置，然后打包，在终端输入：

> webpack

---

二、NPM Scripts

考虑到我们更新一次入口文件，就要打包更新一次编译后的文件，所以为了方便，我们在 package.json 中添加一个 npm 脚本(npm script)，来让操作变得快捷。

在 package.json中的scripts中 添加build即可：

{
  "name": "webpack_dome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2"
  }
}

现在，更新项目后，在终端输入：

>  npm run build

即可将项目进行打包更新，运行。

---

三、多入口、多出口配置

和单一出口对比一下，你会发现这种设置非常简单：
（假如我们src目录下有entry.js和entry2.js文件）

const path = require('path');
module.exports={
    entry:{
        testEntry:'./src/entry.js',
        testEntry2:'./src/entry2.js'
    },
    
    output:{
    	filename:'[name].js',
        path:path.resolve(__dirname,'dist'),
    },
    
    module:{},
    plugins:[],
    devServer:{}
}

可以看到代码的第5和9行进行了增加和修改，在入口文件配置中，增加了一个entry2.js的入口文件（这个文件你需要自己手动建立），这时候要打包的就有了两个入口文件。在代码9行我们把原来的bundle.js修改成了[name].js。

[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。

然后再打包：（你会发现dist目录下会出现testEntry.js和testEntry2.js文件）

> webpack