1. clean-webpack-plugin 清除输出目录

  1. const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  2. module.exports = {
  3.     mode: 'development',
  4.     entry: './src/index.js',
  5.     output: {
  6.         filename: 'index.js',
  7.     },
  8.     plugins: [
  9.         new CleanWebpackPlugin()
  10.     ]
  11. }

2. html-wepack-plugin 生成静态的html文件,文件自动引入生成的js,当js更新的时候,会自动更新引入链接

单个chunk

  1. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');;
  3. module.exports = {
  4.     mode: 'development',
  5.     entry: './src/index.js',
  6.     output: {
  7.         filename: 'index[chunkhash:2].js',
  8.     },
  9.     plugins: [
  10.         new CleanWebpackPlugin(),
  11.         new HtmlWebpackPlugin()
  12.     ]
  13. }

多个chunk,多个页面

  1. const { CleanWebpackPlugin } = require("clean-webpack-plugin")
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');;
  3. module.exports = {
  4.     mode: 'development',
  5.     entry: {
  6.         home: './src/index.js',
  7.         a: './src/a.js',
  8.     },
  9.     output: {
  10.         filename: '[name][chunkhash:2].js',
  11.     },
  12.     plugins: [
  13.         new CleanWebpackPlugin(),
  14.         new HtmlWebpackPlugin({
  15.             template: './public/index.html',//以哪个html模板作为生成html文件的模板
  16.             chunks: ['home'], //使用那个chunk来作为打包后,index.html页面上引入的js,默认为全部
  17.             filename: 'home.html',//生成html页面的文件名,默认的为index.html
  18.         }),
  19.         new HtmlWebpackPlugin({
  20.             template: './public/index.html',//以哪个html模板作为生成html文件的模板
  21.             chunks: ['a'], //使用那个chunk来作为打包后,index.html页面上引入的js,默认为全部
  22.             filename: 'a.html',//生成html页面的文件名,默认的为index.html
  23.         })
  24.     ]
  25. }

3. copy-webpack-plugin 复制某个文件夹的的静态资源内容到另一个文件夹里面去

例子:

  1. 在公共模板的文件夹public里面,index.html文件引入了当前文件下img下面的一张图片,

问题:
1. 由于图片和入口的js并没有依赖关系,导致图片不会被打包,

  1. const { CleanWebpackPlugin } = require("clean-webpack-plugin")
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const CopyWebpack=require('copy-webpack-plugin');
  4. module.exports = {
  5.     mode: 'development',
  6.     entry: {
  7.         home: './src/index.js',
  8.         a: './src/a.js',
  9.     },
  10.     output: {
  11.         filename: '[name][chunkhash:2].js',
  12.     },
  13.     plugins: [
  14.         new CleanWebpackPlugin(),
  15.         new HtmlWebpackPlugin({
  16.             template: './public/index.html',//以哪个html模板作为生成html文件的模板
  17.             chunks: ['home'], //使用那个chunk来作为打包后,index.html页面上引入的js,默认为全部
  18.             filename: 'home.html',//生成html页面的文件名,默认的为index.html
  19.         }),
  20.         new HtmlWebpackPlugin({
  21.             template: './public/index.html',//以哪个html模板作为生成html文件的模板
  22.             chunks: ['a'], //使用那个chunk来作为打包后,index.html页面上引入的js,默认为全部
  23.             filename: 'a.html',//生成html页面的文件名,默认的为index.html
  24.         }),
  25.         new CopyWebpack([ //每一个对象都是一个复制规则
  26.             {
  27.                 from:'./public',to:'./' //to 的默认文件夹位置就是默认输出目录(dist),如果负值的文件和目标文件目录冲突的,就会放弃复制
  28.             }
  29.         ])
  30.     ]
  31. }

4. 开发服务器

在开发阶段,目前遇到的问题是打包,运行,调试过程过于繁琐,回顾一下我们的操作流程:

  1. 编写代码
  2. 控制台运行命令打包
  3. 打开页面看效果
  4. 继续编写代码->回到步骤2

并且,我们往往希望把最终生成的代码和页面部署到服务器上,来模拟真是的环境

为了解决这些问题,webpack官方制作了一个单独的库Lwebpack-dev-server

它既不是plugin也不是loader

来看看怎么使用

  1. 安装 npm i webpack-dev-server

  2. 执行 webpack-dev-server 命令

    webpack-dev-server 命令几乎支持所有的webpack命令参数,如—config,-env等等,你可以把它当做webpack命令来使用

这个命令是专门为开发阶段做准备的,真正的服务器部署的时候还是使用webpack命令

当我们执行webpack-dev-server命令后,它做了如下操作

  1. 执行内部webpack命令,传递命令参数
  2. 开启watch

  3. 注册hooks: 类似于plugin,webpack-dev-server 会向webpack中注册一些钩子函数,主要功能如下

    1. 将资源列表(assets)保存起来
      2. 禁止webpack输出文件

  4. 用express开启一个服务器,监听某个端口,当请到达以后,根据请求的路径,给予相应的资源内容

配置

针对webpack-dev-server的配置,参考
https://www.webpackjs.com/configuration/dev-server/

常见配置

  1. const { CleanWebpackPlugin } = require("clean-webpack-plugin")
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const CopyWebpack=require('copy-webpack-plugin');
  4. module.exports = {
  5.     mode: 'development',
  6.     plugins: [
  7.         new CleanWebpackPlugin(),
  8.         new HtmlWebpackPlugin({
  9.             template: './public/index.html',//以哪个html模板作为生成html文件的模板
  10.         }),
  11.         new CopyWebpack([ //每一个对象都是一个复制规则
  12.             {
  13.                 from:'./public',to:'./' //to 的默认文件夹位置就是默认输出目录(dist)
  14.             }
  15.         ])
  16.     ],
  17.     devServer:{
  18.         port:8001,//端口号
  19.         open:true,//自动打开浏览器窗口
  20.         index:'index.html', //默认请求的文件名
  21.       openPage:'index.html',// 默认打开文件
  22.         proxy:{
  23.             '/api':{
  24.             target:'http://open.duyiedu.com', //前面是一个正则,表示只要是包含api的请求路径,前面的主机地址都匹配为http://open.duyiedu.com,例如你访问的是http://localhost:8080/api/student/findAll会被替换成http://open.duyiedu.com/api/student/findAll
  25.             changeOrigin:true, //更改请求头中的host,和origin
  26.          }
  27.         },
  28.         stats:{
  29.             modules:false,//打包的时候,不输出打包modules的日志信息
  30.             colors:true,//打包输出的日志,颜色区分
  31.         }
  32.     }
  33. }

5. 普通文件处理 file-loader5.0.2,生成依赖文件到输出目录,然后将模块文件设置为:导出一个路径

  1. //file-loader
  2. function loader(source){
  3.     // source：文件内容（图片内容 buffer）
  4.     // 1. 生成一个具有相同文件内容的文件到输出目录
  5.     // 2. 返回一段代码   export default "文件名"
  6. }

测试代码

  1. //希望导入的模块是一个可用的资源路径
  2. const png = require('./assets/bird.jpeg').default;
  4. if (Math.random() < 0.5) {
  5.     var img = document.createElement('img');
  6.     img.src = png;
  7.     document.body.append(img);
  8. }

配置代码

  1. const { CleanWebpackPlugin } = require("clean-webpack-plugin")
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const CopyWebpack = require('copy-webpack-plugin');
  4. module.exports = {
  5.     mode: 'development',
  6.     plugins: [
  7.         new CleanWebpackPlugin(),
  8.         new HtmlWebpackPlugin()
  9.     ],
  10.     module: {
  11.         rules: [
  12.             {
  13.                 test: /\.(png)|(gif)|(jpeg)$/,
  14.                 use: [{
  15.                     loader: 'file-loader',
  16.                     options: {
  17.                         name: '[path][name][hash:].[ext]' //这里面的hash是文件内容的hash跟contenthash是一样的
  18.                     }
  19.                 }]
  20.             }
  21.         ]
  22.     },
  23.     devServer: {
  24.         port: 8001,//端口号
  25.         open: true,//自动打开浏览器窗口
  26.         index: 'index.html', //默认请求的文件名
  27.         proxy: {
  28.             '/api': {
  29.                 target: 'http://open.duyiedu.com', //前面是一个正则,表示只要是包含api的请求路径,前面的主机地址都匹配为http://open.duyiedu.com,例如你访问的是http://localhost:8080/api/student/findAll会被替换成http://open.duyiedu.com/api/student/findAll
  30.                 changeOrigin: true, //更改请求头中的host,和origin
  31.             }
  32.         },
  33.         stats: {
  34.             modules: false,//打包的时候,不输出打包modules的日志信息
  35.             colors: true,//打包输出的日志,颜色区分
  36.         }
  37.     }
  38. }

6. url-loader 3.0.0将依赖文件转换为:导出一个base64字符串

  1. //url-loader
  2. function loader(source){
  3.     // source：文件内容（图片内容 buffer）
  4.     // 1. 根据buffer生成一个base64编码
  5.     // 2. 返回一段代码   export default "base64编码"
  6. }
  1. const { CleanWebpackPlugin } = require("clean-webpack-plugin")
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const CopyWebpack = require('copy-webpack-plugin');
  4. module.exports = {
  5.     mode: 'development',
  6.     plugins: [
  7.         new CleanWebpackPlugin(),
  8.         new HtmlWebpackPlugin()
  9.     ],
  10.     module: {
  11.         rules: [
  12.             {
  13.                 test: /\.(png)|(gif)|(jpeg)$/,
  14.                 use: [{
  15.                     loader: 'url-loader',
  16.                     options: {
  17.                         limit: 1 * 1024 , //默认为fasle,所有的文件你都会被base64编码,超过设置的字节大小则交给file-loader来做,
  18.                       name:"images/[name].[hash:5].[ext]" // 此配置也是给file-loader来用的
  19.                     }
  20.                 }]
  21.             }
  22.         ]
  23.     },
  24.     devServer: {
  25.         port: 8001,//端口号
  26.         open: true,//自动打开浏览器窗口
  27.         index: 'index.html', //默认请求的文件名
  28.         proxy: {
  29.             '/api': {
  30.                 target: 'http://open.duyiedu.com', //前面是一个正则,表示只要是包含api的请求路径,前面的主机地址都匹配为http://open.duyiedu.com,例如你访问的是http://localhost:8080/api/student/findAll会被替换成http://open.duyiedu.com/api/student/findAll
  31.                 changeOrigin: true, //更改请求头中的host,和origin
  32.             }
  33.         },
  34.         stats: {
  35.             modules: false,//打包的时候,不输出打包modules的日志信息
  36.             colors: true,//打包输出的日志,颜色区分
  37.         }
  38.     }
  39. }

7. 解决路径问题

在使用file-loader或url-loader时,可能会遇到一个非常有趣的问题
比如,通过weback打包的目录结构如下:

  1. dist
  2.     |—— img
  3.         |—— a.png  #file-loader生成的文件
  4.     |—— scripts
  5.         |—— main.js  #export default "img/a.png"
  6.     |—— html
  7.         |—— index.html #<script src="../scripts/main.js" ></script>

这种问题发生的根本原因:模块中的路径来自于某个loader或者plugin,当产生路径时,loader或plugin只有相对于dist的目录的路径,并不知道该路径将在哪个资源中使用,从而无法确定最终的正确路径

面对这样的情况,需要依靠webpack的配置pulicPath来解决

  1. const { CleanWebpackPlugin } = require("clean-webpack-plugin")
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const CopyWebpack = require('copy-webpack-plugin');
  4. module.exports = {
  5.     mode: 'development',
  6.     output: {
  7.         filename: 'scripts/[name][chunkhash:2].js',
  8.         publicPath: '/' //一般会配置为/,根目录,一般情况下没什么用,但是某些插件中会用到,一般用来解决路径问题,所有用到这个路径的都会收到影响
  9.     },
  10.     plugins: [
  11.         new CleanWebpackPlugin(),
  12.         new HtmlWebpackPlugin({
  13.             template: './public/index.html',
  14.             filename: 'html/index.html'
  15.         })
  16.     ],
  17.     module: {
  18.         rules: [
  19.             {
  20.                 test: /\.(png)|(gif)|(jpeg)$/,
  21.                 use: [{
  22.                     loader: 'file-loader',
  23.                     options: {
  24.                         name: "imgs/[name].[hash:5].[ext]",
  25.                         // publicPath: '/files' //这里配置的是单独为loader配置的路径
  26.                     }
  27.                 }]
  28.             }
  29.         ]
  30.     },
  31.     devServer: {
  32.         port: 8001,//端口号
  33.         open: true,//自动打开浏览器窗口
  34.         openPage: 'html/index.html',
  35.         index: 'index.html', //默认请求的文件名
  36.         proxy: {
  37.             '/api': {
  38.                 target: 'http://open.duyiedu.com', //前面是一个正则,表示只要是包含api的请求路径,前面的主机地址都匹配为http://open.duyiedu.com,例如你访问的是http://localhost:8080/api/student/findAll会被替换成http://open.duyiedu.com/api/student/findAll
  39.                 changeOrigin: true, //更改请求头中的host,和origin
  40.             }
  41.         },
  42.         stats: {
  43.             modules: false,//打包的时候,不输出打包modules的日志信息
  44.             colors: true,//打包输出的日志,颜色区分
  45.         }
  46.     }
  47. }