如何使用webpack

什么是Webpack

webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack 的使用 - 步骤

步骤：

0.0 初始化项目（生成 package.json 文件）

npm init -y

1.0 安装 webpack

npm install --save-dev webpack@4.44.2 // 安装 webpack npm install --save-dev webpack-cli@3.3.12 // 安装 webpack 的 cli

2.0 配置 package.json

{
 "scripts": {
 "start": "webpack ./要打包的文件名" 
   }
}

3.0 打包

npm run start

4.0 修改导入路径

将 index.html 中导入的 js 替换为 dist 目录中的 js

注意点：

0.0 webpack 可以打包模块化的项目

1.0 一旦运行 npm run start 会将 src 目录下所有的内容打包到 dist 目录中

2.0 在index.html 中不再导入 src 目录下的文件，而是导入 dist 目录下的内容

3.0 src 下的文件依旧是模块化的项目， dist 下的是通过 webpack 打包之后的结构，不再是模块化的结构了（浏览器可以直接运行。）

4.0 问题：

下载第三方包时不成功：

将下载的工具从 npm 改为 cnpm

下载直接报错：

不要将文件夹的名称取名为： webpack

修改 src 的内容之后，需要重新打包才能起作用

webpack 的使用 - npm run

npm run start：会去当前运行的目录下找到 package.json 中的 script 下的 start 指令并且执行

webpack 的使用 - 使用配置文件
由于将来在项目中可以修改的参数（配置项）非常多，如果分散在不同的地方，要修改就太麻烦了。为了解决这样的问题，可以使用 webpack 中的配置文件来管理这些需要修改的参数

步骤：

1.0 在项目的根目录下创建一个文件名为： webpack.config.js

2.0 在配置文件中添加代码

const path = require('path');
module.exports = {
  entry: './src/main.js',
};

3.0 配置package.json 文件

{
    "scripts": {
        "start": "webpack --config webpack.config.js"
    }
}

4.0 删除 dist 目录

5.0重新打包

npm run start

注意点：

1.0 npm run start：

npm run 要运行 package.json 中 scripts 下面的指令

start：找到 package.json 中的 scripts 下面的 start 对应的指令，并且执行

2.0 webpack --config webpack.config.js

配置项 - 入口

在 webpack 中配置项有很多，我们不会全部讲完，会将一些比较常用的配置项列出来

设置项目的入口文件

配置项 - 出口

设置项目打包后生成的文件名

配置项 - 项目的模式

项目模式的区分：

开发模式（development）：

概念：程序员在这个过程中进行代码的开发

特点：

保证代码的完整性，以方便程序进行代码的修改

生产模式（production ）：

概念：程序员的代码已经开发完成，项目已经发布上线了，已经投入生产使用

特点：

代码运行稳定，代码体积尽可能的小（删除空格换行缩进）

mode：（项目的模式）

development：开发模式

production：生产模式（默认值）

配置项 - 解析

resolve：

alias： 别名

@ ：表示的是 src 目录 ,它就是用 alias 来配置的

extensions：可省略的后缀名

在导入文件时，每个文件都有自己的后缀，可通过它来配置可省略的后缀

默认情况下 js 后缀可以省略（除了 js 之外其它的都不能省略）

loader - 作用

由于现在写的项目只有 js 文件，webpack 默认是可以打包 js 文件的。但是 webpack 默认仅仅只能打包 js
文件，无法打包其它文件（图片，样式，字体 …）.如果想要打包其它的文件，可以借助 webpack 中的 loader 来进行打包。

作用：

webpack 默认只能打包 js 文件，无法打包其它文件（样式，字体，图片）。如果想要打包其它的文 件，可以借助 webpack 中的 loader 来进行打包。

特点：

所有的 loader 都是第三方包，可以帮助 webpack 打包其它资源

不同的 loader 打包的文件是不一样的

loader - style-loader&css-loader

可以用来帮助 webpack 打包 .css 文件

步骤：

1.0 安装打包 css 的 loader

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

2.0 配置 Loader (webpack.config.js)

module.exports = {
    entry: '',
    output: {},
    module: {
        rules: [
            { 
                test: /\.css$/,
                use: [
                    'style-loader', // 将样式使用到页面中
                    'css-loader' // 将样式打包到 dist 目录下
                ]
            }
        ]
    }
}

3.0 重新打包

npm run start

注意点：

1.0 大部分的 loader 在使用时步骤都是三步： a. 下载 loader b.配置 loader c.重新打包

2.0 打包样式时用到了 style-loader & css-loader：

css-loader：将 css 中的样式打包到了 dist 目录下的文件中了

style-loader：将打包后的 css 文件在运行时，添加到页面的头部中以 style 标签进行包裹

3.0 style-loader 与 css-loader 的书写顺序不能改变

loader - less-loader

在写项目时，一般会使用 less 语法来书写样式。less 如果需要打包要借助第三方包： less-loader

使用 less

在 style 中创建一个 less.less

添加 less 的样式

在 src/index.js 中导入这个 less

打包 less 的步骤：

1.0 安装第三方包

npm install --save-dev less-loader@5.0.0 less@3.0.4 

2.0 配置 loader (webpack.config.js 中完成的)

module.export = {
    module: {
        rules: [{
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ]
        }]
    }
}

3.0 重新打包

loader - sass-loader

用来打包 sass 文件的

使用 sass 文件：

创建一个 sass 文件（注意点：所有的 sass 文件为了防止跟其它文件冲突，后缀名统一写为 .scss )

完成 sass 的代码

在 index.js 中使用

打包 sass 的步骤：

1.0 下载第三方包

2.0 配置第三方包

3.0 重新打包

loader - file-loader

可以用来打包图片 & 字体

打包图片：

使用图片

在 html 中添加一个容器

给容器设置样式：设置一个背景图片

打包图片：

1.0 下载第三方包

2.0 配置第三方包

3.0 重新打包

注意点：

1.0 会将图片打包到 dist 目录下

2.0 将静态文件：public/index.html 拷贝到 dist 目录下

导入 的js文件的路径也要做相应的修改

打包字体：

使用字体(使用 bootstrap 中的字体文件)

下载 bootstrap （版本号：3.3.7）

导入 bootstrap 的样式

使用字体图标

打包字体：

1.0 下载第三方包

2.0 配置第三方包

3.0 重新打包

loader - babel-loader

将 es6 语法打包为 es5 语法

打包 es6 为 es5

1.0 下载第三方包

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev

2.0 配置第三方包

module: {
  rules: [
    {
      test: /\.js$/, // 将后缀名为 js 的文件进行 es6 转 es5 的处理
      exclude: /node_modules/, // 处理的目录不包括 node_modules
      use: {
        loader: 'babel-loader', // 使用 babel-loader 来处理
        options: {
          presets: ['@babel/preset-env'] // 固定写法
        }
      }
    }
  ]
}

3.0 重新打包

注意点：

最新的 webpack 已经放弃了 ie 浏览器（不会再将 es6 转 es5,所以如果要上述的代码起作用，应该将 webpack 的版本降级为 4.x）

loader - vue-loader

默认情况下 webpack 无法打包后缀名为 .vue 的文件、如果要打包需要借助第三方包： vue-loader

使用 .vue 文件：

1.0 下载第三方包： vue

2.0 创建一个 App.vue 文件

3.0 完成 App.vue 文件的内容

template & style & script

4.0 在 main.js 中

导入 Vue

导入 App.vue

创建一个 vue 实例

将 App.vue 挂载到 vue 实例中

打包 .vue 的过程：

1.0 安装第三方包

npm install -D vue-loader@15.9.3 vue-template-compiler

2.0 配置 Loader （webpack.config.js）

// 导入 Loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
​
module.exports = {
  module: {
    rules: [
      // 配置 loader
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 将 vue-loader 作为插件来使用
    new VueLoaderPlugin()
  ]
}

3.0 重新打包

npm run start

注意点：

1.0 vue-loader 的说明文档不在 webpack 中，因为 vue-loader 是属于 vue 的全家桶系列。如果要找去 vue 的官网中去找

总结：

loader 与配置项一样，也有很多不同的 loader， 我们只是学习了一些常用的 loader，其它的可以参考 传送门

webpack：

配置项：可以用来配置项目的相关信息

loader：可以用帮助 webpack 打包额外的资源

插件 - HtmlWebpackPlugin

给 webpack 提供额外的功能

修改内容之后，重新打包好 dist 目录下的内容之后，还需要将 index.html 从pulibc下拷贝到 dist 目录下，太麻烦了。

问题：我不希望每次重新打包 dist 目录之后再将 index.html 拷贝到 dist 目录下。

解决方案：可以使用 HtmlWebpackPlugin

作用：可以在 dist 目录中自动生成一个 html 文件

使用步骤：

1.0 下载插件

npm install --save-dev html-webpack-plugin@4

2.0 配置插件（webpack.config.js 中完成的）

// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 配置插件
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            filename: '', // 生成的静态文件名称
            template: '' // 以谁为模板生成的静态页面
        })
    ]
}

3.0 重新打包:

npm run start

4.0 删除 public/index.html 中导入 main.js 的代码

注意点：

自动生成的 html 文件有以下特点：

会自动将模板中的内容全部复制一份

会自动在文件的末尾添加入口文件的引用

<script src="main.js"></script>

插件 - clean-webpack-plugin

每次重新打包项目时一定要清除 dist 目录

问题：每次都删除，太麻烦了。解决这个问题可以使用：clean-webpack-plugin

作用：用来清除 dist 目录

步骤：

1.0 下载插件

npm install clean-webpack-plugin --save-dev

2.0 配置插件

// 导入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 配置插件
module.exports = {
    plugins： [
        new CleanWebpackPlugin()
    ]
}

3.0 重新打包

注意点：

1.0 插件会帮助自动清除 dist 目录

2.0 以后如果有能力看文档时，尽量用英文文档

插件 - webpack-dev-server

可以开启一个服务器，具有实时更新的功能

作用：可以开启一个服务器，具有实时更新的功能

步骤：

1.0 下载插件

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

2.0 配置插件（webpack.config.js）

module.exports = {
    devServer: {
        contentBase: './dist'
    },
}

3.0 配置指令：(package.json)

{
    "scripts": {
        "start": "webpack --config webpack.config.js",
        "serve": "webpack-dev-server --open"
    }
}

4.0 开启服务器：npm run serve

注意点：

开启服务器之后，修改完代码之后是不需要自己重新打包， 手动刷新页面的（服务器可以做到时实更新）

webpack-dev-server插件在使用时，默认使用的默认文件的名称为： webpack.config.js

插件 - 模块的热替换

修改 css 之后，可以让页面不 刷新直接更新修改的样式

module.exports = {
    devServer: {
        contentBase: './dist',
        hot: true, // 开启模块的热替换
    }
}

注意点：

配置文件中的配置项发生修改之后需要重启服务才能生效

总结：

插件的作用是给 webpack 提供额外的功能

插件的种类不单单只有以上几种还有很多

webpack

配置项：配置项目中的相关信息

loader：配置打包的文件

plugin：配置额外功能

打包项目 说明：在项目中的 package.json 中有两个指令：

“serve”: “vue-cli-service serve”: 将项目的服务器启动起来

“build”: “vue-cli-service build”:将项目进行打包

步骤：

1.0 运行指令： npm run build

2.0 得到生成的 dist 目录：

这个目录就是我们需要的上线的文件