Webpack入门与基础使用

Webpack入门与基础使用

本文是我学习Webpack中所做笔记，可供快速入门和查阅使用，详细学习推荐黑马程序员的vue学习。

基础概念

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

Webpack解决兼容性问题以及对代码进行优化。

安装与配置

在配置webpack前我们需要进行以下操作

1. 初始化包管理配置文件

   npm init -y
   

   

2. 安装jQuery并导入

   npm i jquery -S
   

   可以直接在js文件使用ES6导入语法导入jQuery

   import $ from 'jquery'
   

3. 安装webpack

   npm i webpack webpack-cli -D
   

   注：可自定义版本，如webpack@5.42.1

   -D代表记录到devDependencies中，只在开发阶段使用

   -S代表记录到Dependencies中，在开发和上线的阶段都会使用

4. 在项目根目录，创建webpack配置文件

   创建webpack.config.js文件,并初始化

   module.exports = {
       modeL 'development'   
   }
   

   mode是对webpack模式进行设置，

   development是开发模式，不进行压缩，打包后的文件大，但是处理速度快。

   production是产品模式，会进行压缩，处理速度慢，但打包后文件小。

   一般开发过程使用开发模式，上线之后使用产品模式。

5. 新增脚本

   在package.json的script节点新增脚本

   "scripts": {
       "dev": "webpack serve",    //可自定义脚本名
   }
   

6. 运行脚本

   在终端输入命令运行

   npm run dev
   

   会产生一个dist文件夹，包含打包后的文件

指定路径

可对webpack打包文件和输出文件路径进行修改

默认打包文件入口为: ./src/index.js

默认输出文件路径为: ./dist.main.js

module.exports = {
    //打包文件路径
    entry: path.join(__dirname, './src/index.js'), 
    
    //输出文件路径
    output: {
        path: path.join(__dirname, 'dist'),

        filename: 'js/bundle.js'
    },
}

此处我将输出的js文件放到dist下的js文件夹下

插件

webpack-dev-server

解决每次修改完源代码之后都需手动打包(运行dev脚本)

每次修改源代码保存后，webpack-dev-server插件可将源文件自动编译后放到内存，大大提高开发效率

1. 安装

   npm i webpack-dev-server -D
   

2. 配置文件

   "dev": "webpack serve"
   

   将package.json下script中的dev命令修改如上

3. 运行脚本

   npm run dev
   

4. 访问网址

   访问，打开src

   注意：此处html文件应引入内存里的js文件

html-webpack-plugin

可将src中的文件复制一份到根目录中，并在生成的页面自动注入js文件，这样我们不需再点击src进入页面

1. 安装

   npm i html-webpack-plugin -D
   

2. 配置

   再webpack.config.js文件中做如下配置

   //导入html插件，得到构造函数
   const HtmlPlugin = require('html-webpack-plugin')
   
   //创建html对象
   const htmlPlugin = new HtmlPlugin({
       template: './src/index.html',  //源文件路径
       filename: './index.html'       //生成文件目录
   })
   
   module.exports = {
       plugins: [htmlPlugin]
   }
   

其他配置

可通过Webpack中的devServer节点配置这个插件

devServer: {
    open: true,    //运行服务器后，自动打开页面
    host: '127.0.0.1',    //打包的主机地址
    port: '80'            //端口号
}

注：每次修改配置文件后都需重启服务器

clean-webpack-plugin

每次打包自动删除原dist文件夹

1. 安装

   npm i clean-webpack-plugin -D
   

2. 配置

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

   const {CleanWebpackPlugin} = require('clean-webpack-plugin')
   
   module.exports = {
       plugins: [new CleanWebpackPlugin]
   }
   

loader

为什么需要loader?

webpack默认只能打包处理js模块，其他非js模块或js模块包含高级js语法需loader加载器进行处理

css-loader

1. 安装

   npm i style-loader css-loader -D
   

2. 配置

   在webpack.config.js中添加module，存放第三方文件模块匹配规则，并进行如下配置

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

   注：loader会从后往前调用，如上文件先交给css-loader处理，然后交给style-loader，webpack会将结果合并到目标js文件。

less-loader

1. 安装

   npm i less-loader less -D
   

2. 配置

   如上对webpack.config.js文件进行配置

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

url-loader

处理图片文件

1. 安装

   npm i url-loader file-loader -D
   

2. 配置

   对webpack.config.js文件进行配置

   module: {
       rules: [
           {test: /\.jpg|png|gif$/, use: 'url-loader?limit=233&outputPath=images'}     
       ]
   }
   

注：

limit参数指当文件大小limit限制，这里为233字节，就会转换为base64格式

Path参数为图片文件打包后位置，当前为dist的images文件夹中

babel-loader

处理部分js高级语法

1. 安装

   npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
   

2. 配置

   如上对webpack.config.js文件进行配置

   module: {
       rules: [
           {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
       ]
   }
   
   

​ exclude代表被除外的

​ 在根目录创建babel.config.js配置文件，并做如下配置

module.exports = {
    plugins: [['@babel/plugin-proposal-decorators', { legacy: true}]]
}

最后打包

在package.json文件新增build，如下

"scripts": {
    "dev": "webpack serve",    //可自定义脚本名
    "build": "webpack --mode production"  执行开发模式webpack
}

source-map

一个信息文件，存储着源代码转换前的位置信息，可以理解为打包前后代码位置的映射关系

利用source-map，可以实现当允许时报错时的行号为源代码中的行号，方便调试代码

配置方式：在webpack.config.js中做如下配置

module.exports = {
    devtool: 'eval-source-map',
}

注：devtool也可设置为nosource-source-map，将只定位行数，不展示源码

webpack @

一般webpack中的@代表src文件夹路径，在webpack.config.js文件中可对其进行配置

resolve: {
    alias: {
        '@': path.join(__dirname, './src/')
    }
}