Webpack最佳入门实践

来源：小侦探旅游网

一.洪水猛兽webpack？

从一个新手的角度去想象webpack
- 我们知道的主流框架是vue，react，a…那啥
- 好吧，现在一般都是vue和react
- 所以，如果是前端三项之力的话，我们会说
  - Vue
  - React
  - Webpack
就是感觉webpack其实挺重要的
- 就会给人一种很难很复杂的感觉，确实，webpack的功能的确很神奇
- 但是webpack其实没有那么难
- 我们通过简单的实践来告诉大家，不要惧怕webpack
- Webpack so easy

言归正传:

作为一个javascript前端开发者，肯定都知道webpack这个东西，也知道各种各样的module。webpack作为一个打包工具，就是将各种各样的模块捆绑（打包）在一起。支持的module有：

CommonJS
AMD
CSS import
Images url
Es module

webpack将所有模块捆绑在一起，使其运行。

二.重要概念

webpack其实就是控制五个模块，它们分别是

入口文件(entry point)

webpack工作开始的地方，就是一个js文件
可以收集其他模块文件
最后将所有模块文件打包到一起，形成一个可运行的代码
入口文件默认是src/index.js

输出文件(output)

outout就是webpack通过build过程打包后形成的文件。

加载器(loaders)

loaders是一些第三方扩展包
可以帮助webpack处理加载各种类型的文件。
- 如处理css，image文件的loaders
- vue，react的loaders
- 如果没有loaders，webpack本身是不支持css文件，vue，react文件的

插件(plugins)

plugins也是第三方插件，它可以改变webpack的工作方式
- 例如有些插件可以设置webpack的环境变量

模式(mode)

webpack有两种工作方式
- development(开发模式)
- production(生产模式)
主要的区别就是在production模式下
- 产生的捆绑包文件更小，去掉了在运行下无关的注释，空格等等
- 这样可以加快用户加载代码的速度

所以，这里有一个小问题，就是loaders和plugins有区别吗?
- 在我看来，loaders是编译时候用一下，plugins则是可以一直使用，我觉得大概是这样吧
看到这里，大家也了解到了为什么webpack的地位如此之高！
- 可以统一不同的代码并打包
- 而且过程中可以把不必要的代码干掉

webpack实践

初始化项目

- 你就是看见创建了一个package.json包
添加一条start脚本

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start":"webpack"
  },

安装相应的依赖
- webpack webpack-cli webpack-dev-serve三个依赖
- yarn add webpack webpack-cli webpack-dev-serve
然后就可以运行刚才编写的start命令了
- yarn start
和你想的一样，啥也没有打包会报错的
- src/index.js创建一个index.js文件
  - 内容就console.log("hello webpack!");吧
再次运行yarn start会有一个warning
- webpack正常运行并生成了一个dist文件夹
- dist就是webpack的输出文件
- 但是有warning，是因为没有指定模式
  - 模式默认是production模式
  - 所以我们在命令中指定模式

"start": "webpack --mode development"

webpack配置文件，指定输入输出

前面提到，我们可以更改webpack的配置的。为了配置webpack，我们需要一个webpack.config.js文件。

首先更改入口文件和出口文件:
- ```
// webpack.config.js
const path = require("path");
module.exports = {
    // 将入口文件指定为main.js
    entry: {index: path.resolve(__dirname, "src", "main.js")},
    // 将输出文件目录改为build/
    output: {
        path: path.resolve(__dirname, "build")
    }
};
```
- entry字段可以用来修改入口文件，上面的代码将webpack入口文件改为src/main.js。
- output字段用于修改输出文件位置，我们将输出文件目录改为build/。
- 将src目录下的index.js文件重命名为main.js，运行start命令，可以看到webpack输出目录build。

添加html页面

为了将webpack打包后的文件，用script标签嵌入到html文档中，我们需要借助第三方plugins扩展html-webpack-plugin

上面介绍过plugin，是改变webpack工作方式的第三方扩展
html-webpack-plugin的作用就是改变webpack的工作方式
使webpack打包后的js文件，添加到html页面的script标签中，这样打开html就可以运行我们的js脚本了

1.首先安装插件

yarn add html-webpack-plugin --dev

2.然后在config文件中使用插件

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  // 将入口文件指定为main.js
  entry: { index: path.resolve(__dirname, "src", "main.js") },
  // 将输出文件目录改为build/
  output: {
    path: path.resolve(__dirname, "build"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
    }),
  ],
};

上面的代码指示webpack加载public/index.html，所以创建public目录，并添加index.html文件，内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hello webpack!</div>
</body>
</html>

看一下打包后的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="index.js"></script>
</head>
<body>
    <div>hello webpack!</div>
</body>
</html>

我们可以看到打包后的js文件已经通过script标签加到了html中

通过webpack启动本地服务

作为开发者，肯定会用到本地服务，webpack提供了development server，可以很方便的启动一个本地服务，方便开发者进行开发工作

1.首先我们需要安装webpack-dev-server包

yarn add webpack-dev-server --dev

2.我们更改package.json中的命令如下:

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "buildDev": "webpack --mode development",
    "start":"webpack serve --mode development"
  },

打包命令为buildDev
本地运行为start
执行yarn start，会在本地8080端口启动一个本地服务。
- 打开可以显示index.html页面

我们再来说说loader

在前面我们提到了plugin的实践
- 那和它有些相似的loader如何使用呢？

以css文件为例

1.我们先安装样式的loader

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

然后配置loader即可

  module: {
    rules: [
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

是不是也很简单
- 这样配置后，写的css文件也可以被编译打包了
- 那么，我们就对webpack的模块都有了一个简单的实践了

提问区域

为什么有的安装使用了-dev有的没有呢？
- 加了-dev表示这些包只在开发模式中使用，方便开发工作，在生产环境下并没有作用

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

全部栏目