Webpack入门

最新推荐文章于 2021-09-05 15:58:45 发布

原创最新推荐文章于 2021-09-05 15:58:45 发布 · 745 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #webpack

JavaScirpt 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了Webpack的基本概念，包括其作为模块打包器的作用及安装方法。详细讲述了Webpack的配置方式，从创建项目到配置文件的使用，再到webpack-dev-server的设置。同时，文中还涉及了如何使用Webpack进行开发环境和生产环境的构建。

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

全局安装

tnpm install -g webpack

Windows环境下会安装到此目录C:\Users\{UserName}\AppData\Roaming\npm中

不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

本地安装

npm install --save-dev webpack
npm install --save-dev webpack@<version>

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack-cli

对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。

当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

查看webpack当前版本时，可能出现如下错误【Webpack4.0新特性】

这里写图片描述
意思是说webpack4.0之后版本中，命令行界面（CLI）在单独的包中，需要安装webpack-cli来使用CLI功能。执行如下其中一个命令即可。

npm install webpack-cli -D

yarn add webpack-cli -D

2018.6.4 update

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https://github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use “npm” to install the CLI via “npm install -D”.
Which one do you like to install (webpack-cli/webpack-command):

创建项目

创建WebpackDemo文件夹，进入命令行，在当前目录下执行

npm init

生成package.json文件（采用默认设置）

在app目录下增加main.js文件

document.write("It works.");

在public目录下增加index.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

命令行使用webpack

webpack app/main.js public/bundle.js

出现如下错误【Webpack4.0新特性】
这里写图片描述

需要指定开发模式mode，指定入口文件app/main.js

webpack --mode development app/main.js

无需指定目标文件，默认输出文件是./dist/main.js
这里写图片描述

然后修改文件index.html的src="../dist/main.js"，本地运行即可。

配置文件使用webpack

根目录下创建webpack.config.js文件，指定入口文件和输出文件

module.exports = {
  entry: './app/main.js',
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
}

有了这个配置文件，执行如下命令即可打包，输出文件目录./public/bundle.js

webpack --mode development

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

快捷的执行打包任务

npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。

在package.json中对scripts进行设置：

"scripts": {
  "dev": "webpack --mode development",
  "publish": "webpack --mode production"
}

执行npm run dev或者npm run publish.
我们可以发现生产环境下打包的文件比之前明显体积变小了。

配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到hot replace，即每次webpack编译之后，你还需要手动刷新浏览器。

webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，便以文件仅保存在内存中。

使用webpack构建本地服务器

全局安装webpack-dev-server

tnpm install -g webpack-dev-server

通过“命令行”启动本地服务

webpack-dev-server --content-base ./public

webpack-dev-server 能够用于快速开发应用程序，后面可以指定不同的指令参数。
–conntent-base 指定本地服务器所加载的页面所在的目录。
–open 启动默认浏览器，或者指定浏览器名

webpack-dev-server --open 'Google Chrome'

访问localhost:8081,不指定--content-base，则显示工程目录结构
这里写图片描述

注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。

配置文件

module.exports = {
  entry: './app/main.js',
  output: {
    path: __dirname + '/public',
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
  } 
}