webpack 之 从 0 创建一个 webpack5 的项目

目录

目标

初始化 webpack 项目

配置核心功能

将 ES6+ 转 ES5

处理样式

处理图片等静态资源

创建 html 文件

开发服务器

清除打包文件

多环境打包

---

目标

• 新建一个 webpack 5 项目，包括开发环境和生产环境

---

初始化 webpack 项目

---

 第一步：初始化  package.json 

npm init -y

 第二步：安装  webpack 

npm install webpack webpack-cli -D

注意：

1. -D 等价于 —— save-dev;  开发环境时所需依赖
2. -S 等价于 —— save;  生产环境时所需依赖

第三步：初始化文件和目录

• 创建  src  目录， src  目录下新增打包的入口文件 paths.js   index.js ， name.js 

 index.js 

import name from './name.js'
console.log(name)

 name.js 

const name = 'shanjian'
export default name

• 创建  path.js  用于存放一些常用文件夹路径

/**
 * @description 常用文件夹路径
 * @author 山间
 */

const path = require('path')
const srcPath = path.join(__dirname, './', 'src')
const distPath = path.join(__dirname, './', 'dist')

module.exports = {
  srcPath,
  distPath
}

•  创建  webpack.common.js  用于编写公用的  webpack  配置（在根目录创建）（这里要加一下添加 npm install webpack-merge _D 的命令）

// webpack.common.js
// 可将开发环境和生产环境下的公用配置抽离到该文件中，可避免重复

const path = require('path')
const { srcPath, distPath } = require('./paths')

module.exports = {
  entry: path.join(srcPath, 'index'),
  module: {
    rules: []
  }
}

•  创建  webpack.dev.js  用于编写开发环境下的  webpack  配置（在根目录创建） 

// webpack.dev.js

const path = require('path')
const webpackCommonConf = require('./webpack.common')
const { merge } = require('webpack-merge')

module.exports = merge(webpackCommonConf, {
  mode: 'development'
})

•  创建  webpack.prod.js  用于编写生产环境下的  webpack  配置（在根目录创建）

// webpack.prod.js

const path = require('path')
const { srcPath, distPath } = require('./paths')
const webpackCommonConf = require('./webpack.common')
const { merge } = require('webpack-merge')

module.exports = merge(webpackCommonConf,  {
  mode: 'production',
  output: {
    path: distPath,
    filename: 'main.[contenthash:8].js', // 打包时加上 hash 戳，注意：webpack 5 是 contenthash
 }
})

• 修改  webpack.config.js  中的  script  字段，添加打包命令

{
    // ...
    "scripts": {
        ...
        "build": "webpack --config webpack.prod.js"
    },
    // ...
}

此时，在项目的根目录下输入 npm run build 命令，就可以对项目进行打包了。打包成功后，会在项目根目录下创建一个  dist  文件夹，里面的  main.contenthash.js  就是我们打包后的文件。

配置核心功能

---

将 ES6+ 转 ES5

由于有些浏览器无法解析 ES6+ 等高级语法，故需要将其转化为浏览器能够解析的低级语法（如：IE浏览器）

第一步：安装依赖 - @babel/core babel-loader @babel/preset-env

npm install @babel/core babel-loader @babel/preset-env -D

第二步：修改  webpack.common.js  配置

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

 第三步：在根目录添加  .babelrc  文件并配置预置项

// .babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

注意：也可直接在  webpack.common.js  中配置预置项

// webpack.common.js

module.exports = {
    // ...
    module: {
        rules: [
            // ES6+ 语法处理
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

处理样式

由于  webpack  默认只能打包处理 commonJS 规范的 js 文件，处理其他类型的文件都需要相对应的处理器进行处理，所以针对 css/less/sass 类型的样式文件，需要引入对应的处理器来处理。

第一步：安装依赖 - style-loader css-loader less less-loader

npm install style-loader css-loader less less-loader -D

第二步：修改  webpack.common.js  配置

// webpack.common.js

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            {    
                test: /\.css$/,
                use: ['style-loader', 'css-loader'] // 注意 loader 的顺序是从后往前
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
}

处理图片等静态资源

同上，除 js 文件的其他文件使用  webpack  打包，也需要特定的处理器处理，如图片、视频等静态资源

第一步：安装依赖 - url-loader file-loader

npm install url-loader file-loader -D

第二步：注意，这里生产环境和开发环境可以分开配置，为什么这么做？先看配置，后面会解释。

开发环境：

// webpack.dev.js

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            // 直接产出图片 url
            {    
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            },
            // 直接产出视频、音频 url
            {
                test: /\.(mp4|ogg|mp3|wav)$/,
                use: 'file-loader'
            }
        ]
    }
}

生产环境： 

// webpack.prod.js

module.exports = merge(webpackCommonConf,  {
  // ...
  module: {
    rules: [
      // ...
      // 图片 -- 考虑 base64 编码的情况
      {
        test: /\.(jpg|jpeg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            // 小于 5kb 的图片用 base64 格式产出
            limit: 5 * 1024,
            // 否则，依然沿用 file-loader 的形式，产出 url 格式
            fallback: {
              loader: 'file-loader'
            },
            // 打包到 /static/video 目录下
            outputPath: '/static/img/'
          }
        }
      },
      // 视频，跟上面的图片也是一样的道理
      {
        test: /\.(mp4|ogg|mp3|wav)$/,
        use: {
          loader: 'url-loader',
          options: {
            // 小于 5kb 的视频 用 base64 格式产出
            limit: 5 * 1024,
            // 否则，依然沿用 file-loader 的形式，产出 url 格式
            fallback: {
              loader: 'file-loader'
            },
            // 打包到 /static/video 目录下
            outputPath: '/static/video/'
          }
        }
      }
    ]
  }
})

       为什么？是因为在开发环境下，在本地环境下，不需要把项目打包压缩的特别小，直接引入图片这样打包速度快，利于开发；而在生产环境下，项目越小加载越快，用户体验越好。所以这块针对静态资源的配置可以分别对生产和开发环境进行配置， webpack.common.js  文件里就可以不对静态资源进行处理了。

创建 html 文件

如何让打包的 js 文件自动地插入到 html 模板中呢？

第一步：安装依赖 - html-webpack-plugin

npm install html-webpack-plugin -D

第二步：修改  webpack.common.js  配置

// ...
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  module: {
    // ...
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(srcPath, 'index.html'),
      filename: 'index.html',
      title: 'Web App'
    })
  ]
}

注意：配置动态网页标题时，需将模板中的