webpack的基础用法

最新推荐文章于 2024-09-26 16:25:55 发布

webxiaoma

最新推荐文章于 2024-09-26 16:25:55 发布

阅读量768

点赞数

分类专栏： webpack 打包工具文章标签： wepack 热加载 ES6转ES5 马新想 webxiaoma

本文链接：https://blog.csdn.net/webxiaoma/article/details/73545364

版权

webpack 打包工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如果你是作为前端的一员，可能你对webpack 并不陌生。它可以将很多如js,css，图片等打包成模块，正应了一切皆模块。当我们在写ES6的某些新语法是=时，有些浏览器可能不支持，这是我们可以利用webpack 去和babel 去将其转化为现在浏览器识别的代码。但是如果你刚接触webpack, 可能学习起来对一些概念可能不是很理解，去官网看有时候长篇大论的文档让人很蒙圈，网上搜索，出来的结果让人难懂。我今天就来总结一下，webpack 的用法，如果你想更深入的学习，那推荐你去官网看文档。如果只是想了解，基本使用，我这篇文章大概可以满足你。

一、webpack前期工作

1、概念：webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler)

2、四个核心！

入口(Entry) ：图表的起点被称之为入口起点
出口(Output) ：将所有的资源(assets)归拢在一起后，我们还需要告诉 webpack 在哪里打包我们的应用程序
加载器(Loader) ：webpack loader 会将这些文件转换为模块，而转换后的文件会被添加到依赖图表中。
插件(Plugins) ：插件(plugins) 最常用于（但不限于）在打包模块的“compilation”和“chunk”生命周期执行操作和自定义功能

概念看不懂，没关系，往下看，当你深入例子时，这些概念自然而然就知道是什么意思了。

3、前期环境

使用webpack 是需要node.js的环境。这里安装node.js 我不做详细介绍，网上搜很多，傻瓜式安装。安装后我们也就可以使用npm了，如果你觉得npm下载的网速慢，你可以使用淘宝提供的淘宝镜像 cnpm 去安装，这里我也不做详细介绍，网上去搜索怎么安装。

新建一个test 文件

二、安装webpack

1、安装webpack

全局安装 npm install webpack -g

你还可以局部安装 npm install --save-dev webpack

如果你安装成功会生成一个 node_modules 文件夹，全局安装会安装在c盘下边，局部安装会安装在你的项目里边。

这里写图片描述

我这里是局部安装的。

2、在test文件中初始化环境： npm init
这时会提示你，设置一些npm包的基本信息，例如名字，版本，描述等等。这里你可以先不用管它，一直按回车键就行。
这里写图片描述

这时你的文件夹里应该生成了 package.json 文件（打包发布时的配置文件）。

这里写图片描述

3、搭建文件目录结构
① 在test 文件中建一个app 文件夹 和 build 文件夹，
② 在test文件中建一个webpack.config.js文件（必须，文件名必须是该文件名）
③ test文件夹中新建一个index.html 文件和 app.js 文件

app文件夹：是我们的入口文件夹（即entry 要指定的入口文件夹），也就是我们写代码，写js 的文件夹
build文件夹 ：是我们的出口文件夹（即output 指定的出口文件夹），也就是我们js 编译后要存放的文件夹
webpack.config.js: 是webpack 配置文件，webpack启动时，会先读取它。

基础目录结构如下：

---app
     --index.html
     --app.js
---build
---node_modules
---package.json
---webpack.config.js

这里写图片描述

三、配置webpack.config.js 文件
我们这里先做一个简单的例子，让你更明白，我们把app文件夹下的 app.js 编译之后（这么做是因为有些代码编译后才能使用，比如ES6 部分代码编译后让浏览器识别，sass 和less 的文件编译后变成可读的css文件），我们app.js 后放到build 文件夹下。这样我们需要简单配置webpack.config.js 文件，配置该文件之前，我们先写点代码。

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app</title>
</head>
<body>
   <h1>APP</h1>
   <P id="content"></P>

   <script src="../bulid/newApp.js"></script>
</body>
</html>

app.js:

document.getElementById("content").innerHTML = "我是第一个页面";

好了，我们来配置webpack.config.js 文件

var path = require('path'); // node 全局path API,写上就行，不要太过于关系
module.exports = {
    entry:'./app/app.js',// 入口文件
    output:{ // 出口文件
       path:path.join(__dirname, 'bulid'), //编译后文件的保存地址，这里是相对路径,记住写法
       filename: 'newApp.js'  // 编译后，生成的文件名字
    }

};

这是最基础的配置。

接下来我们启动wepack:
① 如果你是全局安装的直接在命令行输入 webpack
② 如果你是局部安装的你可以打开 package.json 文件自己配置一下命令
例如：
这里写图片描述

将红色框中的代码修改为 “start“：“webpack” 意思是启动webpack时可以以start 命令代替。
执行： npm start
结果：

这里写图片描述

表示你已经成功了。这时你的build 文件中将会有一个 newApp.js 文件
这里写图片描述

这时我们打开index.html 页面是时展示的是这样的：

四、多文件编译
多文件编译，我们在向app 文件夹下加入一个apptwo.js 和 index-2.html文件，这时app文件夹中有两个将要编译的js文件了，
index-2.html 中写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app</title>
</head>
<body>
   <h1>APP</h1>
   <P id="contentTwo"></P>
   <script src="../bulid/apptwo.js"></script> // index.html页面要引入app.js
</body>
</html>

apptwo.js:

document.getElementById("contenTwo").innerHTML = "我是第二个页面";

重点内容
webpack.config.js 文件我们这样去配置：


var path = require('path');
module.exports = {
    entry:{  //入口文件为多个文件时，用对象写法
       app:'./app/app.js',
       apptwo:'./app/apptwo.js'
    },
    output:{
       path:path.join(__dirname, 'bulid'),
       filename: '[name].js' //因为是多文件所以我们用[name]来为变量起每个文件生成的对应文件名
    }

};

执行： npm start
结果bilud 文件夹下生成app.js 文件和 apptwo.js 文件
app文件夹下的 index.html 和 index-2.html 分别会显示：

这里写图片描述

重点内容
在html文件中我们引入js 是这样引入的 <script src="../bulid/apptwo.js"></script> 其实由于处在node.js 环境中，我们的路径都是对应的，（相当于在同目录下）我们就可以写成这样 <script src="apptwo.js"></script> 也是能载入js 文件的。

五、自动编译热加载

webpack 为我们提供了几个命令：

webpack // 最基本的启动webpack的方法
webpack -w //提供watch方法；实时进行打包更新
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map，方便调式代码

当我们修改要编译的代码后我们不希望每次动启动一遍webpack, 这时我们就用到了 webpack -w 命令，观实时察代码变化。

① 比如我们执行 npm start -w 命令（这里我们的是局部的，自己配置的命名，如果你安装的是全局的直接使用 webpack -w，）
② 我们也可以配置 package.json 文件，将其修改为
这里写图片描述
修改完成之后运行 npm start
当我们在修改要编译的js代码后，直接刷新浏览器，代码就会改变。

另外，我们想，如果我们修改完代码后，不用重复启动webpack,同时也不用自己手动刷新浏览器，只要我们一保存，浏览器自动刷新该怎么办。
这时我们就用到了 webpack 的热加载。
首先想要使用热加载，我们要安装 webpack-dev-server
① 安装webpack-dev-server 命令： npm install webpack-dev-server
②修改 webpack.config.js 文件

var path = require('path'); // node 全局path API,写上就行，不要太过于关系
module.exports = {
     entry:{  //入口文件为多个文件时，用对象写法
       app:'./app/app.js',
    },
    output:{ // 出口文件
       path:path.join(__dirname, 'bulid'), //编译后文件的保存地址，这里是相对路径,记住写法
       publicPath: '/bulid/', // **主要是增加这一项** 配置编译时的公共路径
       filename: '[name].js'  // 编译后，生成的文件名字
    }

};

③ 修改 package.json 文件

这里写图片描述

④ html 页面也需要改动一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>webpack变化</h1>
    <p id="countent"></p>
    <script src="../bulid/app.js"></script> 
    //这一块一定要注意，这里不能写成 app.js  要写成具体路径 ../bulid/app.js  不要实现不了浏览器自动刷新功能
</body>
</html>

六、压缩打包文件
上边我们打包后的js文件，会有好多注释，和默认的代码，如图：
这里写图片描述

我们想要压缩代码，这里有两种方法：
1.配置package.json 文件：
这里写图片描述

然后在执行 webpack -p 命令。

得到的app.js 文件将是压缩的：
这里写图片描述

2.配置 webpack.config.js 文件

var path = require('path'); 
var  webpack = require('webpack'); // 增加
module.exports = {
    entry:{  
       app:'./app/app.js',
    },
    output:{ 
       path:path.join(__dirname, 'bulid'), 
       publicPath: '/bulid/', 
       filename: '[name].js'  
    },
    plugins:[  // 添加
         new webpack.optimize.UglifyJsPlugin()
    ]

};