走近webpack（1）--多入口及devServer的使用

zaking

发布于 2018-05-02 15:09:28

1.6K0

发布于 2018-05-02 15:09:28

文章被收录于专栏：zaking'szaking's

　　上一篇文章留下了一些问题，如果你没看过上一篇文章，可以在我的博客里查找，或者直接从这篇文章开始也是没问题的。　

const path = require('path');
module.exports={
    entry:{
        entry:'./src/entry.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
/*上面的代码中还有path以及__dirname的意思就是指获取到当前项目的绝对路径，涉及到了node.js的相关知识，这里不做过多的解释，有兴趣的小伙伴可以自己去找一下资料。*/
        filename:'[name].js'
/*这里name的意思就是指获取入口文件的名称用来作为出口文件的名称，这样你就不用有几个入口就写几个出口名称啦*/
    },
    module:{},
    plugins:[],
    devServer:{}
}

　　这是上一篇文章中使用但是没有详细讲解的代码片段。现在我们来一一做一个了解。

　　entry：配置入口文件，也就是你想要打包的文件路径。可以是单一的，也可以是多入口文件。下面会详细的讲解。‘

　　output：配置出口文件，也就是你想要在那个文件夹下面生成打包后的文件。同样的，既然入口可以是多文件，那么出口也可以是多出口的。

　　module：模块配置，主要用于一些loader的使用，用于转换编译less，sass，图片等文件。

　　plugins：配置插件，如果想要更多的功能满足项目的需求，那么你需要使用到插件。

　　devServer：配置开发服务功能，后面会更详细的介绍。

那么简单配置介绍完了，下面我们一起看一下多入口以及多出口文件是如何应用的

首先我们在dist目录下的index.html做一下简单的修改，我们引入另外一个名称为entry2.js的文件，并且把body中的代码修改成下面的这个样子。

<div id="title"></div>
<div id="name"></div>
<script src="./entry1.js"></script>
<script src="./entry2.js"></script>

　　然后，我们在src目录下新建一个entry2.js，里面写上这样的代码。

document.getElementById('name').innerHTML="我是入口2的文件哦，看我打包成功了没？";

　　第三步，在webpack.config.js中entry的配置项下增加一个入口链接，

 entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js',
        //这里我们又引入了一个入口文件
    }

　　OK，至此我们的项目就修改完成，试一下在命令行中输入npm run build之后的结果吧。

　　此时我们的目录结构看起来是这样的：

　　在浏览器中打开index.html，会发现出现了两句话。那么就说明打包成功咯。

至此，你已经学会了入口出口，以及多入口多出口文件的配置。接下来我们来学一下devServer能做些什么，要怎么做。

　　首先我们来安装一下webpack-dev-server，

　　运行下面的命令，等待完成就可以了，完成后你会看到package.json中devDependencies项下面多了一个webpack-dev-server及其相应的版本号。

npm install webpack-dev-server --save-dev

　　那么，webpack-dev-server究竟是用来做什么的呢？它主要是启动了一个使用express的http服务器，用来伺服资源文件。

　　OK，安装完成之后，我们需要在webpack.config.js的devServer选项中写几行简单的代码：

/*设置基本目录结构，也就是你想要使用服务的目录地址*/
contentBase:path.resolve(__dirname,'dist'),
/*服务器的IP地址，可以使用IP也可以使用localhost*/
host:'localhost',
/*服务端压缩是否开启，目前开不开都行，想关你就关*/
compress:true,
/*配置服务端口号，建议别用80，很容易被占用，你要是非要用也是可以的。*/
port:9090

　　然后，在package.js中的scripts选项中再配置一个命令脚本，它看来应该是这样子滴：

　　好了，现在该写的代码都写完了，咱们来看看效果。

　　在命令行中输入npm run server,唉？！有趣的事情发生了，竟然报错了。错误说让你安装webpack-cli，行吧，那么咱们再安装一下webpack-cli。

npm install webpack-cli -D

　　安装完webpack-cli，我们兴致勃勃地去npm run server，发现又TM错了，咋个回事。

　　先别急，我们来看一下报错信息：

　　不想看的小伙伴可以不看，这都什么啊！在你安装完webpack-cli后，会提示你一些安装包（webpack-cli，webpack-dev-server等）需要webpack版本在4.0以上，如果你不当回事继续npm run server，就会报错了。回头看一下发现咱们的webpack版本是3.6.0。有码为证，确实是。