webpack基础第一篇（配置文件）
Posted 文艺范儿m
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack基础第一篇（配置文件）相关的知识，希望对你有一定的参考价值。
1.安装mode.js、npm本地环境，lue
2.命令语言
mkdir webpack_demo //建立文件夹
cd webpack_demo //进入文件夹
npm install -g webpack //全局安装webpack
npm init //初始化
npm install --save-dev webpack //安装目录
3.建立项目基本结构
src文件夹 ----存放编写的源码
dist文件夹 ----存放webpack打包后的文件
dist下建立index.html文件，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jspang webpack</title> </head> <body> <div id="title"></div> <script src="./bundle.js"></script> </body> </html>
src下建立entry.js文件，代码如下：
document.getElementById(‘title‘).innerHTML=‘Hello Webpack‘;
4.配置文件
项目根目录下创建webpack.config.js文件，代码如下：
const path = require(‘path‘); module.exports={ //入口文件的配置项 entry:{ //里面的entery是可以随便写的 entry:‘./src/entry.js‘ }, //出口文件的配置项 output:{ //打包的路径文职 path:path.resolve(__dirname,‘dist‘), //打包的文件名称 filename:‘bundle.js‘ }, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} }
如果需要多入口，多出口文件我们只需要做如下修改：
const path = require(‘path‘); module.exports={ //入口文件的配置项 entry:{ entry:‘./src/entry.js‘, //这里我们又引入了一个入口文件 entry2:‘./src/entry2.js‘ }, //出口文件的配置项 output:{ //输出的路径，用了Node语法 path:path.resolve(__dirname,‘dist‘), //输出的文件名称 filename:‘[name].js‘ }, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} }
在入口文件配置中，增加了一个entry2.js的入口文件（这个文件你需要自己手动建立），这时候要打包的就有了两个入口文件。在代码14行我们把原来的bundle.js修改成了[name].js
待续。。。
以上是关于webpack基础第一篇（配置文件）的主要内容，如果未能解决你的问题，请参考以下文章