webpack指南（基础篇）——手把手教你配置webpack

前言

今天我们来从零开始搭建一个项目,并实现用webpack打包和优化

一、安装

 yarn add webpack webpack-cli -D

二、构建项目目录

1.在项目根目录创建webpack.config.js
2.创建dist目录作为打包输出路径
3.创建index.js作为入口文件
整体结构如下

三、修改配置

1.修改webpack.config.js中配置，导出一个对象

module.exports = {
    
};

2.修改配置

const path = require('path');
module.exports = {
  //   模式；devlopment开发；production生产；webpack会根据模式的不同自动启用一些优化方式；
  mode: 'development',
  //   入口文件目录
  entry: './index.js',
  //   输出目录
  output: {
    // 打包后的文件名
    // filename: 'app.bound.js',
    // 也可以拼接哈希值和文件名称 index会被转义为main,如下输出文件名称为:main.哈希值.js
    filename: '[name].[fullhash].js',
    // 输出绝对路径
    path: path.resolve(__dirname, 'dist'),
  },
};

3.执行
执行webpack命令就可以完成对项目的打包，会在dist目录下输出打包后文件；

webpack

四、常用配置项

webpack默认只能打包js文件，对html，css等的打包需要配置loader使用；

1.打包css

1.安装css-loader style-loader;

css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
style-loader把 CSS 插入到 DOM 中

yarn add css-loader style-loader -D

2.配置css规则

  module: {
    // module.rules中配置对文件的处理规则
    rules: [
      {
        // 使用正则匹配文件名称
        test: /\.css$/i,
        // 对匹配到的文件应用loader,多个loader遵循先右后做的执行规则
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

3.测试一下效果：

// main.css
.demo{
    width:200px;
    height: 200px;
    background-color: pink;
}
// index.js
import './main.css';

执行webpack进行打包，打包后可以看到css和js文件是在一起的，没有单独分离开；

4.抽离css

4.1安装mini-css-extract-plugin

yarn add mini-css-extract-plugin -D

4.2使用

// 引入
const miniCssExtractPligin = require('mini-css-extract-plugin');
// 使用
// 在webpack的pluin中注册
plugins: [new miniCssExtractPligin()]
// 用miniCssExtractPligin替代style.loader
{
	// 使用正则匹配文件名称
	test: /\.css$/i,
	// 对匹配到的文件应用loader,多个loader遵循先右后做的执行规则
	use: [miniCssExtractPligin.loader, 'css-loader'],
},

4.3效果
打包后css已经是一个单独的文件了

2.打包scss

scss文件是不能被浏览器识别的，所以我们需要借助loader将他打包为css

// 安装
	yarn add -D sass-loader sass
      //   配置scss规则
      {
        test: /\.scss/i,
        use: [miniCssExtractPligin.loader, 'css-loader', 'sass-loader'],
      },

这里有个小坑，scss的loader是sass-loader,刚开始搜scss-loader一直找不到，给大家提个醒。

3.打包html

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。并能自动引入css

// 安装
yarn add html-webpack-plugin
// 使用
const htmlWebpackPlugin = require('html-webpack-plugin');
// plugin中注册使用
new HtmlWebpackPlugin({ template: './index.html' }),

常用的配置参数

4.打包静态资源

webpack默认提供了处理静态资源的方法，只需增加如下配置即可；
但是注意：图片打包后路径和名称会发生改变，静态引入时会发现图片无法加载；可以使用动态引入的方式解决；

      // 处理静态资源
      {
        test: /\.(png|jpg|gif|svg)$/i,
        type: "asset",
      },

5.js降级

用于将es6语法降级，适配各版本浏览器；
安装

yarn add babel-loader @babel/core @babel/preset-env -D

配置

      //   js降级
      {
        test: /\.js$/i,
        // 排除node_modules下的文件
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              // 降级es6
              presets: ['@babel/preset-env'],
            },
          },
        ],
      },

bable打包后会引用一些辅助方法，导致代码体积增大，可以引入 @babel/plugin-transform-runtime 使所有辅助代码从这里引用。
具体操作：
安装

yarn add @babel/plugin-transform-runtime @babel/runtime -D

配置参数修改为：

options: {
            // 降级es6
            presets: ['@babel/preset-env'],
            //   修改辅助代码引入
            plugins: ['@babel/plugin-transform-runtime'],
          },

6.删除旧的打包文件

webpack每次打包不会清除上一次打包的文件，我们需要配置一下：
安装

yarn add clean-webpack-plugin -D

配置

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// plugin中
new CleanWebpackPlugin(),

截至到现在，已经可以完成一个基本的打包工作了，接下来我们看下webpack服务。

五.配置webpack-dev-server

配置webpack-dev-server可以实现浏览器与本地文件的实时通讯，本地资源变化时，向浏览器重新推送资源；

安装

yarn add webpack-dev-server -D

配置

  devServer: {
    // 配置目录
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    // 端口号
    port: 9000,
  },

启动

webpack serve

六、快捷启动命令

可以通过package.json配置快捷启动命令

  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  }

然后就可以通过yarn build / yarn serve 启动了

ok，基础篇就到这里，接下来我们看webpack打包优化；