webpack的使用，看这一篇就够了

目录

一、安装webpack

二、配置webpack

三、自定义打包的入口和出口

四、webpack插件的使用

五、webpack中的loader

六、配置webpack的打包发布

---

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

首先在安装webpack之前，你的本地环境需要先安装node.js 的环境。

一、安装webpack

在终端运行以下命令，安装webpack相关的包文件

npm install [email protected] [email protected] -D

二、配置webpack

1.在项目根目录中，创建名为webpack.config.js的配置文件，并初始化以下配置：

module.exports = {
    mode: 'development'   //mode 用来指定构建模式，可选值有development和production
}

//mode 的可选值有两个
// 1.development  开发环境，不会对打包生成的文件进行代码压缩和性能优化，且打包速度快，
//   适合在开发阶段使用。
// 2.production   生产环境，会对打包生成的文件进行代码压缩和性能优化，且打包速度很慢，
//   仅适合在项目发布阶段使用。

webpack.config.js是webpack的配置文件，webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

2.在package.json文件中的scripts节点下，新增dev脚本：

"scripts": {
    "dev": "webpack"
}

注意：配置webpack后，在index.html中导入的js文件应该为打包后的dist/js/main.js文件

 

三、自定义打包的入口和出口

在webpack中默认的打包入口文件为src下的index.js文件，默认的输出文件路径为dist 下的main.js文件。

但是，开发者可以自定义打包的入口和出口文件：

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口，如下所示：

const path =require('path')  //导入 node.js 中专门操作路径的模块

module.exports = {
  entry: path.join(__dirname, './src/index.js'),  //打包入口文件的路径
  output: {
    path: path.join(__dirname, './dist'), //输出文件的存放路径
    filename: 'newmain.js'  //输出文件的名称，将之前的main.js文件改为了newmain.js
  }
}

注意：自定义后，要将index.html中导入的dist/js/main.js文件的路径改为打包后的dist/js/newmain.js文件路径。

四、webpack插件的使用

通过插件的使用，可以拓展webpack的能力，从而让webpack用起来更方便，常用到的插件有两个：

1. webpack-dev-server

  作用：每当修改了源代码，webpack会自动进行项目的打包和构建，不需要开发者再重新运行npm ren dev 打包命令了。

2. html-webpack-plugin

作用：可以通过此插件自定制index.html页面的内容。

以下为两个插件的安装和配置方法：

1. 安装和配置webpack-dev-server，

第一步：在终端运行以下命令：

npm install [email protected] -D
//@3.11.0是版本号，-D 是把这个包安装在开发节点下

第二步：配置webpack-dev-server

修改package.json文件中的scripts节点下的dev脚本

"scripts": {
    "dev": "webpack serve"
}

2. 安装和配置html-webpack-plugin，

第一步：在终端运行以下命令：

npm install [email protected] -D
//@3.11.0是版本号，-D 是把这个包安装在开发节点下

第二步：配置html-webpack-plugin

在webpack.config.js配置文件中，进行以下配置：

//1.导入HTML插件，得到一个构造函数
const Htmlplugin = require('html-webpack-plugin')

//2.创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
  template: './src/index.html',  //指定原文件的存放路径
  filename: './index.html'       //指定生成的文件的存放路径
})

module.exports = {
  mode: 'development',
  plugin: [htmlPlugin]  //通过plugin节点，使htmlPlugin插件生效
}

五、webpack中的loader

loader 概述： 在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结尾的模块webpack默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错。

loader加载器主要协助webpack打包处理特定的文件模块，例如：.css相关的文件、.less相关的文件、以及webpack无法处理的搞经济JS语法。

以下分别讲解配置步骤：

1.打包处理 css 文件

(1)运行以下命令，安装处理css文件的loader

npm i [email protected] [email protected] -D

（2）在webpack.config.js文件中的module节点下的rules数组中，添加loader规则如下：

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.css$/, use: ['style-loader',  'css-loader'] }
    ]
}

//test 表示匹配的文件类型，use表示对应的要调用的loader

2.打包处理 less 文件

(1)运行以下命令，安装处理less文件的loader

npm i [email protected] [email protected] -D

（2）在webpack.config.js文件中的module节点下的rules数组中，添加loader规则如下：

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.less$/, use: ['style-loader',  'css-loader', less-loader] },
    ]
}

3.打包处理样式表中与url路径相关的文件

(1)运行以下命令，安装处理url路径相关文件的loader

npm i [email protected] [email protected] -D

（2）在webpack.config.js文件中的module节点下的rules数组中，添加loader规则如下：

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=25553'},
    ]
}

//limit用来指定图片的大小，单位是字节，只有<=limit大小的图片，才会被转为base64格式的图片

4.配置babel-loader

(1)运行以下命令，安装babel-loader相关的包

npm i [email protected] @babel/[email protected] @babel/[email protected] -D

（2）在webpack.config.js文件中的module节点下的rules数组中，添加loader规则如下：

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.js$,
          //exclude为排除项，表示babel-loader只需处理开发者编写的js文件，不需要处理node_modules下的js文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            //声明一个babel插件，此插件用来转化class中的高级语法
            plugins: ['@babel/plugin-proposal-class-properties'], 
          },
        },
      },
    ]
}

六、配置webpack的打包发布

在package.json文件的scripts节点下，新增build命令如下：

"scripts": {
    "dev": "webpack serve",  //开发环境下，运行npm run dev 命令打包
    "build": "webpack --mode production"  //项目发布时，运行npm run build 命令打包
}

1.把JavaScript文件统一生成到js目录中

在webpack.config.js配置文件的output节点中，进行如下的配置:

output: {
    path: path.join(__dirname, 'dist'),
    //明确告诉webpack把生成的newmain.js文件存放到dist目录下的js 子目录中
    filename: 'js/newmain.js',
}

2.把图片文件统一生成到image目录中

修改webpack.config.js配置文件中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径:

module: {         //所有第三方文件模块的匹配规则
    rules: [      //文件后缀名的匹配规则
      { test: /\.jpg|png|gif$/,
        use: {
            loader: 'url-loader',
            options: {
                limit: 25553,
                //明确指定把打包生成的图片文件，存储到dist目录下的image文件中
                outputPath: 'image',
            },
        },
      },
    ]
}

3.自动清理dist目录下的旧文件

(1)运行以下命令，安装clean-webpack-plugin插件

npm install [email protected] -D

（2）在webpack.config.js配置文件中导入插件并挂载

//按需导入插件、得到插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

//把创建的cleanPlugin插件实例对象，挂载到plugins节点中
plugins: [htmlPlugin, cleanPlugin],

以上便是webpack 相关的知识点，欢迎收藏+点赞哦！