webpack3快速入门

约定不等于承诺〃 2022-05-09 09:50 408阅读 0赞

### 前言 ###

这篇文章是本人学习 webpack3 的笔记总结，现在 webpack 版本已经更新到了4。其中2和3是可以通用的，但是1和其他的两个版本依赖上有些不相容，所以不能一起使用。Webpack1到2最大的升级是tree-shaking，其次是配置文件的对象化，再其次包括插件的写法优化。Webpack2到3的最大升级是scope-hoisting。3到4简化了整个打包配置操作。

### 什么是webpack ###

webpack 是一个模块打包器，它将根据模块的依赖关系进行静态分析，生成对应的静态资源

### 理解Loader ###

webpack 本身只能加载 JS/JSNO 模块，如果加载其他类型的文件（模块），就需要使用对应的 loader 进行转换/加载，它本身是一个函数，接受源文件作为参数，返回转换的结果。loader 一般以  
xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转化功能，比如 css-loader

### 配置文件(默认) ###

webpack.config.js ：是一个node模块，返回一个 json 格式的配置信息对象

### 插件 ###

插件可以完成一些 loader 不能完成的功能，插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。常用的插件如下：（需要了解更多插件可以查看[webpack2中文文档][webpack2]）  
CleanWebpackPlugin: 自动清除指定文件夹资源  
HtmlWebpackPlugin: 自动生成HTML文件并  
UglifyJSPlugin: 压缩js文件

### 初始化项目 ###

npm init :生成 package.json 文件，也可以手动创建

{
      "name": "webpack01",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
    }

### 安装 webpack ###

npm install webpack -g ：全局安装  
npm install --save-dev webpack ：局部安装  
pm install webpack@3.8.1 --save-dev ：安装指定的版本  
如果你使用 webpack v4+ 版本，你还需要安装 CLI。  
npm install --save-dev webpack-cli 或 npm install --save-dev webpack-command  
安装完成后可通过 webpack 命令检验是否成功，webpack -h 可以查看 webpack 的版本。

### 实现打包功能 ###

创建一个空的项目，创建入口src/js/ : entry.js：用于引入所需要打包的各种文件

import {foo,bar} from "./main";
    import data from "../data/test.json";
    
    import '../css/test.css';

\*document.write(“entry.js is work”); //内容可随意编写，只是为了初步检验  
**编译js**  
webpack src/js/entry.js dist/js/bundle.js ，其中 src/js/entry.js 是需要打包的文件路径，dist/js/bundle.js 是打包后生成文件的路径，每更新一次数据都需要重新执行打包命令。

### 使用 webpack 配置文件 ###

webpack.config.js：该配置模式固定，可以直接复制，更改自己对应的文件路径即可。

const path = require('path');
    module.exports = {
      entry: './src/index.js',    //入口文件，即需要打包的文件集合
      output: {
        filename: 'main.js',  //打包后的输出文件名
        path: path.resolve(__dirname, 'dist')  //输出文件路径
      }
    };

使用该配置文件后可以通过 webpack 命令即可执行打包文件，则简化了上面 webpack src/js/entry.js dist/js/bundle.js 这一大串的命令。

### 打包css和图片文件 ###

**安装样式的 loader**  
npm install css-loader style-loader --save-dev  
npm install file-loader url-loader --save-dev  
补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。  
**配置 loader**  
webpack.config.js

module: {
          rules: [
            {
              test: /\.css$/,
              use: [
                'style-loader',
                'css-loader'
              ]
            },
            {
              test: /\.(png|jpg|gif)$/,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    limit: 8192      
                  }
                }
              ]
            }
          ]
        }

在 src目录下创建一个 image 文件夹，并放入两张图片  
\* 小图: img/logo.png  
\* 大图: img/big.jpg  
创建样式文件: src/css/test.css

body {
          background: url('../img/logo.jpg')
        }

**更新入口 js : entry.js**  
import ‘…/css/test.css’  
添加css样式

#box1{
    		  width: 300px;
    		  height: 300px;
    		  background-image: url("../image/logo.jpg");
    		}
    		#box2{
    		  width: 300px;
    		  height: 300px;
    		  background-image: url("../image/big.jpg");
    		}

index.html 添加元素

**执行打包命令** webpack  
**注意**：此时会出现问题，大图无法打包到entry.js文件中，index.html不在生成资源目录下。页面加载图片会在所在目录位置查找，导致页面加载图片时候大图路径无法找到。  
解决办法：  
使用publicPath : ‘dist/js/’ //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。将index.html放在dist/js/也可以解决。

### 自动编译打包 ###

利用webpack开发服务器工具: webpack-dev-server  
**下载**  
npm install --save-dev webpack-dev-server  
执行：webpack-dev-server  
\*\*注意：\*\*我在这个地方之前遇到了一个问题，也是花了不少时间才解决的，当执行 webpack-dev-server 时，提示错误，说webpack-dev-server 不是内部命令  
解决办法：  
1、删除  
node\_modules  
2、更改镜像  
npm config set registry [https://registry.npm.taobao.org][https_registry.npm.taobao.org]  
3、安装  
nmp install  
4、指定版本安装 webpack-dev-server  
npm install -g webpack-dev-server@2.7.1  
5、启动  
webpack-dev-server  
webpack配置

devServer: {
            contentBase: './dist'
          },

package 配置

"start": "webpack-dev-server --open"

最后编译打包应用并运行  
npm start

[webpack2]: https://webpack.docschina.org/guides/installation/
[https_registry.npm.taobao.org]: https://registry.npm.taobao.org