webpack 3 的学习记录

最新推荐文章于 2024-07-05 17:02:50 发布

飞啊飞我的骄傲放纵-未来全栈工程师

最新推荐文章于 2024-07-05 17:02:50 发布

阅读量105

点赞数 1

分类专栏： webpack node.js 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_44378370/article/details/108771063

版权

node.js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

webpack

2 篇文章 0 订阅

订阅专栏

一、安装WebPack

用win+R打开运行对话框，输入cmd进入命令行模式。然后找到你想开始项目的地方，输入下方代码
```
mkdir webpack_demo
cd webpack_demo
```
初始化项目命令行输入：
```
npm init
```
输入完成后，npm终端会问你关于项目的名称，描述……一堆内容，如果你不考虑发布到npm上，这些内容都不重要，而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。
接下来安装webpack
```
npm install --save-dev webpack@3.6.0
```
查看webpack版本
```
webpackw  -v
```
可以看到我现在的版本的3.6.0版本，出现了版本号，也说明你的webpack安装成功了。

二、快速上手一个Demo

进入后在根目录建立两个文件夹，分别是src文件夹和dist文件夹：
src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
你可以理解成src是源码文件，dist是我们编译打包好的文件；一个用于开发环境，一个用于生产环境。

编写程序文件：/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>

这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件。我们的index.html写好后，接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。

src/entery.js 编写

document.getElementById('title').innerHTML='Hello Webpack';

第一次Webpack打包 Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：
```
webpack {entry file} {destination for bundled file}
```
{entery file}:入口文件的路径，本文中就是src/entery.js的路径；
{destination for bundled file}:填写打包后存放的路径。
注意：在命令行中是不需要写{ }的。
打包成功

三、配置文件：入口和出口

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

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

entry选项（入口配置）这个选项就是配置我们要压缩的文件一般是JavaScript文件（当然也可以是CSS……）。按照上节课的代码(如果你上节课的代码还没作，那你可以返回去重新作一下)，这里要填写的是src目录下的entery.js文件。
wepback.config.js中的entry选项
```
//入口文件的配置项
entry:{
    //里面的entery是可以随便写的
    entry:'./src/entry.js'
},
```
output选项（出口配置）出口配置是用来告诉webpack最后打包文件的地址和文件名称的。按照上节课的操作，应该打包到dist目录下。在编写出口文件时，我们需要用到一点Node的知识，如果你还不会Node也没有关系，就简单的两句代码，你记住就可以了
```
//出口文件的配置项
output:{
    //打包的路径文职
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'bundle.js'

},
```
如果你只这样写，是会报错的：找不到path这个东西。所以我们要在webpack.config.js的头部引入path，代码如下：
```
const  path  =  require('path');
```
这里我们使用了const，这是ES6的语法，如果你对ES6还不熟悉，也可以看技术胖ES6的课程哦（http://old.jspag.com/2017/06/03/es6/）。
其实path.resolve(__dirname,’dist’)就是获取了项目的绝对路径。如果你还是不理解，我会在视频中给你进行演示。
filename:是打包后的文件名称，这里我们起名为bundle.js。
现在webpack.config.js的代码：
```
const path = `require`('path');
module.exports={
    //入口文件的配置项
    entry:{
        entry:'./src/entry.js'
    },
    //出口文件的配置项
    output:{
        //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'),
        //输出的文件名称
        filename:'bundle.js'
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}
```
这个代码写完后，可以在终端中直接输入webpack就会进行打包。
在实际开发中我们都是通过配置文件进行打包的，所以必须要掌握好。

多入口、多出口配置
Webpack在版本1的时候很难设置多出口文件，但是在2版本开始就变的很方便了。直接看多入口和多出口的文件配置，然后可以和单一出口对比一下，你会发现这种设置非常简单（只需改动两点配置就可以）。

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:{}
}

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

四、配置文件：服务和热更新

作为一个前端工程师，最大的编程需求之一就是所见即所得的工具，也就是常说的热更新。现在一般有点规模的公司都为前端工程师准备了双屏显示器，其目的就是一个屏幕编写代码，一个屏幕实时显示页面效果。这节课就学习用webpack3.6版本实现热更新效果。
设置webpack-dev-server
要执行webpack-dev-server是要先用npm install webpack-dev-server –save-dev来进行下载的。下载好后，需要配置一下devServer。最简单的devServer配置项只有四个。先看一下代码，然后我再作解释。
/webpack.config.js
```
devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    }
```
contentBase:配置服务器基本运行路径，用于找到程序打包地址。
host：服务运行地址，建议使用本机IP，这里为了讲解方便，所以用localhost。
compress：服务器端压缩选型，一般设置为开启，如果你对服务器压缩感兴趣，可以自行学习。
port：服务运行端口，建议不使用80，很容易被占用，这里使用了1717.
注意：这里需要使用npm 来进行安装webpack-dev-server了，命令如下:
```
cnpm install webpack-dev-server@2.11.5 --save-dev
```
配置好后，你可以试着在终端中输入webpack-dev-server,如果可以执行成功，但是往往提示下面的错误（或者是无法找到内部或外部命令）。
出现下面的错误不用慌张，我们只要在package.json里配置一下scripts选项就可以执行了。
/package.json
```
"scripts": {
    "server":"webpack-dev-server"
 },
```
配置好保存后，在终端里输入 npm run server 打开服务器。然后在浏览器地址栏输入http://localhost:1717就可以看到结果了。

飞啊飞我的骄傲放纵-未来全栈工程师

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
webpack 3 的学习记录

一、安装WebPack用win+R打开运行对话框，输入cmd进入命令行模式。然后找到你想开始项目的地方，输入下方代码mkdir webpack_democd webpack_demo初始化项目命令行输入：npm n init输入完成后，npm终端会问你关于项目的名称，描述……一堆内容，如果你不考虑发布到npm上，这些内容都不重要，而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。接下
复制链接

扫一扫