从零开始的Webpack4教程

2023年5月17日 188次阅读 来源: 后端开发

1、了解Webpack相关

  • 什么是webpack

    • Webpack是一个模块打包器(bundler)。
    • 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
    • 它将根据模块的依赖关系进行静态分析，生成对应的静态资源

  • 五个核心概念

    • Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
    • Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
    • Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
    • Plugins：插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
    • Mode：模式，有生产模式production和开发模式development

  • 理解Loader

    • Webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
    • Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
    • 它本身是一个函数，接受源文件作为参数，返回转换的结果
    • loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。

  • 理解Plugins

    • 插件可以完成一些loader不能完成的功能。
    • 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

  • 配置文件(默认)

    • webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象

2、开启项目

  • 初始化项目：

    • 生成package.json文件

      {
  "name": "webpack_test",
  "version": "1.0.0"
}

  • 安装webpack

    • npm install webpack webpack-cli -g //全局安装
    • npm install webpack webpack-cli -D //本地安装

3、编译打包应用

  • 创建js文件

    • src/js/app.js
    • src/js/module1.js
    • src/js/module2.js
    • src/js/module3.js

  • 创建json文件

    • src/json/data.json

  • 创建主页面:

    • src/index.html

  • 运行指令

    • 开发配置指令：webpack src/js/app.js -o dist/js/app.js –mode=development

      • 功能: webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法

    • 生产配置指令：webpack src/js/app.js -o dist/js/app.js –mode=production

      • 功能: 在开发配置功能上加上一个压缩代码

  • 结论：

    • webpack能够编译打包js和json文件
    • 能将es6的模块化语法转换成浏览器能识别的语法
    • 能压缩代码

  • 缺点：

    • 不能编译打包css、img等文件
    • 不能将js的es6基本语法转化为es5以下语法
  • 改善：使用webpack配置文件解决，自定义功能

4、使用webpack配置文件

  • 目的：在项目根目录定义配置文件，通过自定义配置文件，还原以上功能
  • 文件名称：webpack.config.js

  • 文件内容：

    const {resolve} = require('path'); //node内置核心模块，用来设置路径。
module.exports = {
  entry: './src/js/app.js',   // 入口文件
  output: {                     // 输出配置
    filename: './js/bundle.js',      // 输出文件名
    path: resolve(__dirname, 'dist')   //输出文件路径配置
  },
  mode: 'development'   //开发环境(二选一)
  mode: 'production'   //生产环境(二选一)
};
  • 运行指令： webpack

5、js语法检查

  • 安装loader

    • npm install eslint-loader eslint –save-dev

  • 配置loader

    module: {
  rules: [
    {
      test: /\.js$/,  //只检测js文件
      exclude: /node_modules/,  //排除node_modules文件夹
      enforce: "pre",  //提前加载使用
      use: { //使用eslint-loader解析
        loader: "eslint-loader" 
      }
    }        
  ]
}

  • 修改package.json（需要删除注释才能生效）

    "eslintConfig": {   //eslint配置
  "parserOptions": {  
    "ecmaVersion": 8,  // es8
    "sourceType": "module", //  ECMAScript 模块
  }
}
  • 运行指令：webpack

6、js语法转换

  • 安装loader

    • npm install babel-loader @babel/core @babel/preset-env –save-dev

  • 配置loader

    module: {
  rules: [
    {
      oneOf: [  //数组中的配置只有一个能够生效, 后面的配置都会放在当前数组中
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  ]
}
  • 运行指令：webpack

7、打包less资源

  • 创建less文件

    • src/less/test1.less
    • src/less/test2.less

  • 入口app.js文件

    • 引入less资源

  • 安装loader

    • npm install css-loader style-loader less-loader less –save-dev

  • 配置loader

    oneOf: [
  {
    test: /\.less$/,
    use: [{
      loader: "style-loader"
    }, {
      loader: "css-loader" 
    }, {
      loader: "less-loader" 
    }]
  }
]
  • 运行指令：webpack
  • 在index.html中引入打包生成的dist/js/bundle.js文件,观察效果

8、打包样式文件中的图片资源

  • 添加2张图片:

    • 小图, 小于8kb: src/images/1.png
    • 大图, 大于8kb: src/images/2.jpg
  • 在less文件中通过背景图的方式引入图片

  • 安装loader

    • npm install file-loader url-loader –save-dev
    • 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

  • 配置loader

    {
  test: /\.(png|jpg|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        outputPath: 'images/',   //在output基础上，修改输出图片文件的位置
        publicPath: '../dist/images/',  //修改背景图引入url的路径
        limit: 8 * 1024,  // 8kb大小以下的图片文件都用base64处理
        name: '[hash:8].[ext]'  // hash值为7位，ext自动补全文件扩展名
      }
    }
  ]
}
  • 运行指令：webpack
  • 在index.html中引入打包生成的dist/js/bundle.js文件,观察效果

9、打包html文件

  • 添加html文件

    • src/index.html
    • 注意不要在html中引入任何css和js文件

  • 安装插件Plugins

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

  • 在webpack.config.js中引入插件（插件都需要手动引入，而loader会自动加载）

    • const CleanWebpackPlugin = require(‘clean-webpack-plugin’)

  • 配置插件Plugins

    plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
]
  • 运行指令：webpack

10、打包html中图片资源

  • 添加图片

    • 在src/index.html添加两个img标签

  • 安装loader

    • npm install html-loader –save-dev

  • 修改entry

    • entry: [‘./src/js/app.js’, ‘./src/index.html’]

  • 配置loader

    {
  test: /\.(html)$/,
  use: {
    loader: 'html-loader'
  }
}
  • 运行指令：webpack

11、打包其他资源

  • 添加字体文件

    • src/media/iconfont.eot
    • src/media/iconfont.svg
    • src/media/iconfont.ttf
    • src/media/iconfont.woff
    • src/media/iconfont.woff2

  • 修改样式

    @font-face {
  font-family: 'iconfont';
  src: url('../media/iconfont.eot');
  src: url('../media/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../media/iconfont.woff2') format('woff2'),
  url('../media/iconfont.woff') format('woff'),
  url('../media/iconfont.ttf') format('truetype'),
  url('../media/iconfont.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  • 修改html，添加字体

  • 配置loader

    {
  loader: 'file-loader',
  exclude: [/\.js$/, /\.html$/, /\.json$/],
  options: {
    outputPath: 'media/',
    publicPath: '../dist/media/',
    name: '[hash:8].[ext]',
  },
}
  • 运行指令：webpack

12、自动编译打包运行

  • 安装loader

    • npm install webpack-dev-server –save-dev

  • 引入webpack

    • const webpack = require(‘webpack’);

  • 修改webpack配置对象（注意不是loader中）

    devtool: 'inline-source-map',  // 将编译后的代码映射回原始源代码，更容易地追踪错误和警告
devServer: {
  contentBase: './dist',  //项目根路径
  hot: true,  //开启热模替换功能
  open: true  //自动打开浏览器
},
plugins: [
  new webpack.NamedModulesPlugin(),
  new webpack.HotModuleReplacementPlugin()
]

  • 修改loader部分配置

    • 因为构建工具以dist为根目录，不用再找dist了
    • publicPath: '../dist/images/' –> publicPath: 'images/'
    • publicPath: '../dist/media/' –> publicPath: 'media/'

  • 修改package.json中scripts指令

    • “start”: “webpack-dev-server”,
    • “dev”: “webpack-dev-server”
  • 运行指令：npm start / npm run dev

以上就是webpack开发环境的配置，可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。

13、准备生产环境

  • 创建文件夹config，将webpack.config.js复制两份

    • webpack.dev.js
    • webpack.prod.js

  • 修改webpack.prod.js配置，删除webpack-dev-server配置

    module.exports = {
  output: {
    filename: 'js/[name].[hash:8].js',   //添加了hash值, 实现静态资源的长期缓存
    publicPath: '/'  //所有输出资源公共路径
  },
  module: {  //loader其他没有变化，只放了变化部分，只有需要修改路径部分改了
    rules: [
      {
        oneOf: [
          {
            test: /\.(png|jpg|gif|svg)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8 * 1024,  // 8kb大小以下的图片文件都用base64处理
                  name: 'images/[name].[hash:8].[ext]'
                }
              }
            ]
          },
          {
            loader: 'file-loader',
            exclude: [/\.js$/, /\.html$/, /\.json$/],
            options: {
              name: 'media/[name].[hash:8].[ext]',
            },
          }
        ]
      }
    ]
  },
  mode: 'production',  //修改为生产环境
}

  • 修改package.json的指令

    • “start”: “webpack-dev-server –config ./config/webpack.dev.js”
    • “dev”: “webpack-dev-server –config ./config/webpack.dev.js”
    • “build”: “webpack –config ./config/webpack.prod.js”

  • 开发环境指令

    • npm start
    • npm run dev

  • 生产环境指令

    • npm run build

    • 注意: 生产环境代码需要部署到服务器上才能运行

      • npm i serve -g
      • serve -s dist

14、清除打包文件目录

  • 安装插件

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

  • 引入插件

    • const CleanWebpackPlugin = require(‘clean-webpack-plugin’);

  • 配置插件

    new CleanWebpackPlugin()
  • 运行指令：npm run build

15、提取css成单独文件

  • 安装插件

    • npm install mini-css-extract-plugin –save-dev

  • 引入插件

    • const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);

  • 配置loader

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

  • 配置插件

    new MiniCssExtractPlugin({
  filename: "css/[name].[hash:8].css",
  chunkFilename: "css/[id].[hash:8].css"
})

  • 运行指令

    • npm run build
    • serve -s dist

16、添加css兼容

  • 安装loader

    • npm install postcss-loader autoprefixer –save-dev

  • 配置loader

    {
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
    'less-loader',
  ]
}

  • 在项目根目录添加postcss配置文件：postcss.config.js

    module.exports = {
  "plugins": {
    "autoprefixer": {
      "browsers": [
        "ie >= 8",
        "ff >= 30",
        "chrome >= 34",
        "safari >= 8",
        "opera >= 23"
      ]
    }
  }
}

  • 运行指令：

    • npm run build
    • serve -s dist

17、压缩css

  • 安装插件

    • npm install optimize-css-assets-webpack-plugin –save-dev

  • 引入插件

    • const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);

  • 配置插件

    new OptimizeCssAssetsPlugin({
  cssProcessorPluginOptions: {
    preset: ['default', { discardComments: { removeAll: true } }],
  },
})

  • 运行指令：

    • npm run build
    • serve -s dist

18、图片压缩

  • 安装loader

    • npm install img-loader imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo imagemin –save-dev

  • 配置loader

    {
  test: /\.(png|jpg|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8 * 1024,  // 8kb大小以下的图片文件都用base64处理
        name: 'images/[name].[hash:8].[ext]'
      }
    },
    {
      loader: 'img-loader',
      options: {
        plugins: [
          require('imagemin-gifsicle')({
            interlaced: false
          }),
          require('imagemin-mozjpeg')({
            progressive: true,
            arithmetic: false
          }),
          require('imagemin-pngquant')({
            floyd: 0.5,
            speed: 2
          }),
          require('imagemin-svgo')({
            plugins: [
              { removeTitle: true },
              { convertPathData: false }
            ]
          })
        ]
      }
    }
  ]
}

  • 运行指令：

    • npm run build
    • serve -s dist

19、压缩html

  • 修改插件配置

    new HtmlWebpackPlugin({
  template: './src/index.html',
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeRedundantAttributes: true,
    useShortDoctype: true,
    removeEmptyAttributes: true,
    removeStyleLinkTypeAttributes: true,
    keepClosingSlash: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }
})

  • 运行指令：

    • npm run build
    • serve -s dist

以上就是webpack生产环境的配置，可以生成打包后的文件。

到这里基本配置已经告一段落了，所有配置我已经放在 仓库 中

第二期 Webpack4优化教程 已出~ 欢迎关注和提问~

    原文作者：后端开发
    原文地址: https://segmentfault.com/a/1190000018534625
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞