Webpack 前端构建与开发服务器实战指南

常见前端打包工具简介

一、常见打包工具的介绍

在前端构建领域，常见的打包工具有 RequireJS、Browserify 和 Webpack。其中，RequireJS 是一个基于 AMD（异步模块定义）规范的 JavaScript 模块加载器；Browserify 旨在让 Node.js 模块能在浏览器环境中使用；而 Webpack 则是专为前端模块打包与构建设计的工具。

Webpack 基础安装与使用

二、工具的使用

(1) 作为 npm 包的 RequireJS 提供了一个可执行的 r.js 工具，通过命令行执行，使用方式如下：

npm install -g requirejs
r.js -o app.build.js

(2) Browserify 提供的命令行工具，使用如下面所示：

npm install -g browserify
browserify main.js -o bundle.js

(3) Webpack 的使用

如下面所示，使用命令进行安装与使用，如下所示：

npm install webpack -g
webpack main.js -o bundle.js

在上面命令行中，我们进行了简单的全局安装 webpack 和对 main.js 文件的打包操作

Webpack 项目构建与配置

三、项目构建

对前端项目来说，Webpack 扮演的是构建工具的角色，并不是代码依赖，应该被安装在 dev-dependencies 中，使用如下命令进行安装：

npm install webpack --save-dev

在这个示例中，将进行简单应用的构建，包括两个 js 模块

1. 生成文本”Hello world”的 hello 模块（hello.js）

module.exports = 'Hello world';

2. 打印文本的 index.js 模块（index.js）

var text = require('./hello');
console.log(text);

和用于在前端浏览器中显示内容的 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

在上面的 src 路径引入的 bundle.js 文件是不存在的，因为还没有创建，在使用 webpack 进行创建打包之后的 js 文件，如下面所示命令进行创建：

webpack ./index.js bundle.js

在执行完上面命令之后，我们就可以在浏览控制台中看到打印出的结果 Hello world

这样，我们就实现了简单项目的实现原理，打包内容为 bundle.js，我们能够看到打包之后的内容，在这里就不贴代码了。

当然，如果我们写代码都是这样去构建，那么，作用意义也不大，这就不得不提及 webpack 的另外一个优点了，那就是配置文件的使用，在使用配置文件之前，我们在进行安装样式加载器，如下面命令：

npm install style-loader css-loader --save-dev

通过上面的配置，我们就能够进行样式的加载

然后我们进行 webpack 配置文件设置，需要首先在项目下创建文件 webpack.config.js 文件，其中内容如下所示：

var path = require('path');
module.exports = {
 entry: path.join(__dirname, 'index'),
 output: {
  path: __dirname,
  filename: 'bundle.js'
 },
 module:{
  loaders: [
   {
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
   }
  ]
 }
};

在上面代码中， * entry: 表示项目的入口文件 * output: 表示构建打包之后的结果输出，在输出的对象中仍有多项配置比如上面所使用的输出路径和输出文件名 * module.loaders 是对于模块中的 loader 使用的配置，值为一个数组，数组的每一项指定一个规则，规则的 test 字段是正则表达式，若被依赖模块的 ID 符合该正则表达式，则对依赖进行使用 loader 转换。这样，我们就能够使用 webpack 命令进行代码的转换 更多详细说明请参见(https://www.jb51.net/article/136710.htm)

如下面命令行命令就可以进行代码的打包工作webpack

通过执行上面命令，同样能够实现文件的打包，并且，在显示文件时也能够将样式进行显示，为了证明样式确实能够被引入，我们进行创建 index.css 文件，其中内容如下所示：

body {
  background-color: darkgray;
}

然后在我们之前创建的 index.js 中引入，修改之后的代码如下所示：

// import style from './index.css';
var style = require('./index.css');
var text = require('./hello');
console.log(text);

在上面代码中，注释掉的是 node 模块的导入形式，而使用中的是 CommonJS 的使用规范，使用同样的命令打包之后，我们能够在浏览器中看到如下效果：

也就是样式进行了展现。

搭建实时开发环境

当然，webpack 也能够通过 webpack-dev-server 进行项目的实时构建。 使用如下命令进行 webpack-dev-server 的安装：

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

在安装之后，我们能够配置使用服务器，首先，我们的 package.json 文件将会更为下面这样，新增内容为：

 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start":"webpack-dev-server --inline"
 },

在添加完这行命令之后，我们就可以使用下面命令进行启动 webpack-dev-server 服务器了，

npm run start

之后完整的 package.json 为如下：

{
 "name": "react-basics-review",
 "version": "1.0.0",
 "description": "a practise of react study ",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start":"webpack-dev-server --inline"
 },
 "repository": {
  "type": "git",
  "url": "git+https://github.com/suwu150/react-basics-review.git"
 },
 "author": "jkwu",
 "license": "ISC",
 "bugs": {
  "url": "https://github.com/suwu150/react-basics-review/issues"
 },
 "homepage": "https://github.com/suwu150/react-basics-review#readme",
 "devDependencies": {
  "babel-plugin-transform-object-rest-spread": "^6.23.0",
  "babel-preset-es2015": "^6.24.1",
  "css-loader": "^0.28.5",
  "lodash": "^4.17.4",
  "mocha": "^3.5.0",
  "react": "^15.6.1",
  "style-loader": "^0.18.2",
  "webpack": "^3.5.5",
  "webpack-dev-server": "^2.7.1"
 },
 "dependencies": {
  "lodash": "^4.17.4"
 }
}

webpack 配置文件修改为如下内容：

devServer 中常用的配置对象属性如下：

* 1. contentBase：”./” // 本地服务器在哪个目录搭建页面，一般我们在当前目录即可； * 2. historyApiFallback：true // 当我们搭建 spa 应用时非常有用，它使用的是 HTML5 History Api，任意的跳转或 404 响应可以指向 index.html 页面； * 3. inline：true // 用来支持 dev-server 自动刷新的配置，webpack 有两种模式支持自动刷新，一种是 iframe 模式，一种是 inline 模式；使用 iframe 模式是不需要在 devServer 进行配置的，只需使用特定的 URL 格式访问即可；不过我们一般还是常用 inline 模式，在 devServer 中对 inline 设置为 true 后，当我们启动 webpack-dev-server 时仍要需要配置 inline 才能生效，这一点我们之后再说； * 4. hot：true // 启动 webpack 热模块替换特性，这里也是坑最多的地方，不少博客都将 hot 设置了 true，这里其实如果单单设置为 true 是不起作用, 会报错误的, 错误如下图所示:

这是因为在使用的过程中没有使用插件的原因, 只需要将下面命令添加到配置文件即可：

plugins:[
  new webpack.HotModuleReplacementPlugin(),
 ],

也就是调用 webpack 的热模块插件处理。

*5 .port：端口号(默认 8080) ； *6.其他配置信息 –quiet 控制台中不输出打包的信息 –compress 开启 gzip 压缩 –progress 显示打包的进度 –open 自动打开浏览器

var path = require('path');
const webpack = require ("webpack");
module.exports = {
 entry: path.join(__dirname, 'index'),
 output: {
  path: __dirname,
  filename: 'bundle.js',
  publicPath: "/assets/",
 },
 module:{
  loaders: [
   {
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader']
   }
  ]
 },
 plugins:[
  new webpack.HotModuleReplacementPlugin(),
 ],
 devServer:{
  //我们在这里对webpack-dev-server进行配置
  contentBase: "./",
  historyApiFallback:true,
  inline:true,
  hot:true
 }
};

index.html 文件的内容修改为下面面格式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>身在山中不知山高</div>
<script src="assets/bundle.js"></script>
</body>
</html>

也就是将路径进行修改, 因为在 webpack.config.json 文件中进行了服务器路径的配置, 修改了 publicPath: "/assets/",项, 在命令行执行npm run start能看到服务器正常启动, 然后我们去浏览器进行访问, 如下所示结果：

至此, 我们完成了 webpack 实时构建的配置, 当我们进行修改某一样式文件或者 js 文件的时候, 项目就会重新打包, 并且自动刷新加载到浏览器中。

如下面链接提示:, 进行实时构建的搭建 webpack-dev-server 实时搭建

同时该项目使用的代码在 github 地址如下:github 地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。