webpack基础

2023-10-26

webpack基础

设置webpack模式的几种方法
1. npx webpack --mode=development (mode的优先级高于env)
2. npx webpack --env=development
```
// webpack.config.js
module.exports = (env) => {
  return {
    mode: env
    //....
  }
}
```
以上两种方式只会影响模块内的环境变量(也不会影响plugin、loader内的环境变量)
3. npx cross-env NODE_ENV=development webpack
cross-env用于设置环境变量(兼容windows和mac)
这种方式是设置当前node的环境变量

执行webpack打包

// 1. 使用默认配置
// npm install webpack webpack-cli -D
// npx webpack


// 2. 自定义配置(webpack.config.js)
const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build') // 必须是绝对路径
  }
}
// npx webpack --config webpack.config.js

webpack创建静态服务 – webpack-dev-server

// npm install webpack-dev-server -D
// 在webpack.config.js中配置devServer
// 开发服务器的配置  -- 使用的是内存中打包后的文件
const devServer = {
  port: 3000,
  static: {  // webpack5使用static，不再使用contentBase
    directory: path.join(__dirname, 'build')  // 静态文件目录(如果你还有一些没有参与打包的静态文件也需要作为开发服务器的资源被访问，那你就需要额外通过配置“告诉” webpack-dev-server)
  },
  open: true, // 自动打开页面
  compress: true // 启用gzip压缩
}

将js文件引入模板html – html-webpack-plugin

plugins = [
  // 把打包后的js文件引入模板html
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, 'src/index.html'),
    filename: 'index.html',
    minify: {
      collapseWhitespace: true, // 去掉换行
      removeAttributeQuotes: true // 删除双引号
    },
    hash: true
  })
]

解析less – less-loader
解析css – css-loader (解析@import语法)
生成style标签插入模板 – style-loader

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

提取css，用link标签引入 – mini-css-extract-plugin

module = {
  rules: [
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,  // 使用loader
        'css-loader'
      ]
    }
  ]
}
plugins = [
  new MiniCssExtractPlugin({
    filename: 'css/main.css'  // 输出路径
  })
]

postcss autoprefixer – 给css3样式添加前缀

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

// 添加postcss.config.js文件   postcss插件会读取这个文件
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: [
        'last 10 Chrome versions',
        'last 5 Firefox versions',
        'Safari >= 6',
        'ie> 8'
      ]
    })
  ]
}

optimize-css-assets-webpack-plugin – 压缩css

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
optimization = {
  minimizer: [
    new UglifyjsWebpackPlugin({
      cache: true,
      parallel: true,
      sourceMap: true
    }),
    new OptimizeCssAssetsWebpackPlugin() // 压缩css资源，会导致js资源没有压缩，需要使用uglifyjs压缩js
  ]
}

ES6转ES5 – babel-loader @babel/core @babel/preset-env

module = {
  rules: [
    {
      test: /\.js$/,
      use: [
        {
          loader: 'babel-loader', // es6 -> es5
          options: {
            presets: ['@babel/preset-env']
          }
        }
      ]
    }
  ]
}

支持更高级的语法 – npm i @babel/plugin-transform-runtime(支持generator等语法) @babel/runtime @babel/polyfill(支持es7及以上语法) @babel/plugin-proposal-decorators(支持类装饰器语法) -D

module = {
  rules: [
    test: /\.js$/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ["@babel/preset-env"],
          plugins: [
            ["@babel/plugin-proposal-decorators", {
              legacy: true
            }]
            "@babel/plugin-transform-runtime"
          ]
        }
      }
    ]
  ]
}

配置代码校验 – eslint eslint-loader

module = {
  rules: [
    {
      test: /\.js$/,
      use: [
        {
          loader: 'eslint-loader',
          options: {
            enforce: 'pre' // 优先执行  post 延后执行
          }
        }
      ]
    }
  ]
}

webpack配置

打包多页面应用

module.exports = {
  entry: {
    index: './src/index.html',
    home: './src/home.html'
  },
  output: {
    filename: '[name].[hash:6].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['index']  // 表示只引入名称为index的js文件
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'home.html',
      chunks: ['home', 'index'] // 表示引入名称为index和home的js文件
    })
  ]
}

sourcemap

// source-map  会单独生成一个sourcemap文件，出错了会标识当前报错的行和列
// inline-source-map 不会单独生成sourcemap文件，能提示错误代码准确信息和位置
// 
// eval-source-map 不会产生单独的文件 但是可以显示行和列
// cheap-module-source-map 不会产生列 但是是一个单独的映射文件
module.exports = {
  devtool: 'source-map'
}

watch --> 监听打包(build)

module.exports = {
  watch: true,
  watchOptions: {
    poll: 1000, // 每秒检查一次变动(轮询)
    aggregateTimeout: 500, // 防抖
    ignored: /node_modules/ // 不需要监控node_modules
  }
}

webpack插件

cleanWebpackPlugin --> 每次重新打包删除之前打包的内容

// npm i clean-webpack-plugin -D
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  plugins: [
    new CleanWebpackPlugin('./build') // 打包后的目录
  ]
}

copyWebpackPlugin --> 将静态资源拷贝打包到dist目录下

// npm i copy-webpack-plugin -D
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: './doc', // 静态资源目录
          to: './' // 打包后的目录(dist)
        }
      ]
    })
  ]
}

bannerPlugin (webpack内部插件)

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.BannerPlugin('bannerbanner') // 在打包生成的每个文件最前面添加版权标识(bannerbanner)
  ]
}

webpack解决跨域
正向代理: 正向代理代理的对象是客户端(翻墙)
反向代理: 反向代理代理的对象是服务端(nginx) 服反客正

module.exports = {
  devServer: {
    port: 3000,
    static: path.join(__dirname, 'build'),
    open: true,
    compress: true,
    // 1. 
    proxy: {
      // 重写并转发给别的服务器
      '/api': {
        target: 'http://localhost:5000',
        pathRewrite: {
          '/api':''
        }
      }
    },
    // 2. 模拟数据(废弃,使用setupMiddlewares)
    onBeforeSetupMiddleware(devServer){
      devServer.app.get('/user', (req, res) => {
        res.json({
          name: 'before'
        })
      })
    }
  }
}

1. 服务器和web共用一个端口 (在服务器中运行webpack)

const express = require('express');
const webpack = require('webpack');
let middle = require('webpack-dev-middleware'); // npm i webpack-dev-middleware 启动webpack的中间件
const config = require('./webpack.config.js') // 引入webpack配置文件
const compiler = webpack(config)

let app = express();
app.use(middle(compiler))
app.get('/user', (req, res) => {
  res.json({
    name: 'zwp'
  })
})

app.listen(5000)

解析resolve

module.exports = {
  resolve: {
    extensions: ['.js', '.css', '.json'], // 自动匹配后缀名
    alias: {
      bootstrap: 'bootstrap/dist/css/bootstrap.css' // 路径别名
    },
    mainFields: [], // 当从npm包中导入模块时，此选项将决定在 package.json 中使用哪个字段导入模块
    mainFiles: [], // 解析目录时要使用的文件名
    modules: [path.resolve('node_modules')] // 告诉webpack模块解析时应该搜索的目录
  }
}

环境变量

定义环境变量 - DefinePlugin

// 内置插件DefinePlugin
const webpack = require('webpack')
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      DEV: JSON.stringify('development'), 
      FLAG: 'true', 
      EXPRESSION: '1+1'  // 使用时会执行字符串
    })
  ]
}

// key会作为全局变量属性
// index.js
console.log(DEV) // development
console.log(FLAG) // true
console.log(EXPRESSION) // 2

区分不同的环境
npm i webpack-merge

// webpack.config.base.js
module.exports = {
  // 基础配置
}

// webpack.config.prod.js
const {merge} = require('webpack-merge')
const base = require('./webpack.config.js')
module.exports = merge(base, {
  mode: 'production'
})

// webpack.config.dev.js
const {merge} = require('webpack-merge')
const base = require('./webpack.config.js')
module.exports = merge(base, {
  mode: 'development'
})

webpack优化

noParse --> 不去解析第三方库中的依赖项

module.exports = {
  entry: './src/index',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  module: {
    noParse: /jquery/, // 不解析项目中import的jquery中的依赖库
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-evn',
              '@babel/preset-react'
            ]
          }
        }
      }
    ]
  }
}

IgnorePlugin

module.exports = {
  plugins: [
    // 正则匹配要忽略的引入的文件路径
    new webpack.IgnorePlugin({
      resourceRegExp: /(\/locale)/
    })
  ]
}

DllPlugin 动态链接库

tips: 先将第三方库打包好，生成manifest.json清单文件，在项目中通过DllReferencePlugin在manifest清单文件中动态查找，找不到再打包(ps: 需要手动在模板html文件中将打包好的文件引入)

// webpack.react.js -- 用于打包第三方库
const path = require('path')
const webpack = require('webpack')
module.exports = {
  mode: 'production',
  entry: {
    react: ['react', 'react-dom']
  },
  output: {
    filename: '_dll_[name].js',
    path: path.resolve(__dirname,'dist'),
    library: '_dll_[name]' // 定义变量名称，将导出的结果赋值给这个变量
    // libraryTarget: 'umd' // 模式
  },
  plugins: [
    // 生成清单，可以找到这个动态链接库
    new webpack.DllPlugin({
      name: '_dll_[name]', // 这里的name要和library保持一致!!
      path: path.resolve(__dirname,'dist', 'manifest.json')
    })
  ]
}
// 1. 通过 npx webpack --config webpack.react.js生成打包结果和manifest清单
// 2. 将打包后的js文件手动引入模板index.html文件  <script src="../dist/_dll_react.js"></script>

// 3. 在主项目中通过DllReferencePlugin查找清单
// webpack.config.js
plugins = [
  new webpack.DllReferencePlugin({
    manifest: path.resolve(__dirname, 'dist', 'manifest.json') // 去动态链接库里查找，找不到再进行打包
  })
]

多线程打包 – happypack

// npm i happypack -D
const HappyPack = require('happypack')
module = {
  rules: [
    {
      test: /\.js$/,
      use: 'happypack/loader?id=js'
    }
  ]
}

plugins = [
  new HappyPack({
    id: 'js',
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: [
            // ["@babel/plugin-proposal-decorators", {
            //   "legacy": true
            // }],
            "@babel/plugin-transform-runtime"
          ]
        }
      }
    ]
  })
]

webpack自带优化

mode设置为production模式时会tree shaking，development模式不会
require语法不支持tree shaking

es6模块会把结果放到default上

// test.js
export default {
  add() {
    console.log('add')
  }
}

// index.js
const Add = require('./test.js')
Add.default.add()  // 'add'

scope hosting(作用域提升): production模式下，webpack会自动简化一些代码

公共代码抽离(多入口多页面)

module.exports = {
  optimization: {
    // 分割代码块
    splitChunks: {
      // 缓存组
      cacheGroups: {
        common: {
          chunks: 'initial',
          minSize: 0,
          minChunks: 2 // 有两个以上的引用就抽离出来
        },
        vendor: {
          priority: 1, // 默认是从上到下执行(不设置优先级,会将第三方库和上面的公共代码打包到一起)，这个选项设置为优先执行
          test: /node_modules/,
          minSize: 0,
          minChunks: 2
        }
      }
    }
  }
}

懒加载 import()

const button = document.createElement('button')
button.innerHTML = '按钮'
document.body.appendChild(button)

button.addEventListener("click", function () {
  import('./source').then(data => {
    console.log(data)
  })
})

热更新

devServer = {
  hot: true // 默认开启
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WEBPACK

前端

javascript

webpack基础的相关文章

获取画布上下文的最后一个点的坐标

我想创建一个arrowTo功能与CanvasRenderingContext2D prototype 为此我需要获取最后一个点的坐标例如 var ctx someCanvas getContext 2d ctx moveTo 10 40
onclick 函数上的 CSS 选择器

有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a
使用 Ajax 在输入时提交 Textarea，然后渲染部分内容而不刷新整个页面

目前我正在尝试通过 JS 和 Ajax 在没有提交按钮的情况下发表评论并且它有效问题是当帖子提交时页面重新加载到 post id comment页面我希望它呈现部分内容而不是刷新整个页面或将我带到不同的页面我对 JS 不熟悉任
执行页面的 javascript 后保存页面的 html 输出

我正在尝试抓取一个网站它首先加载 html js 使用js修改表单输入字段然后使用POST 如何获得 POSTed 页面的最终 html 输出我尝试使用 phantomjs 执行此操作但它似乎只有渲染图像文件的选项谷歌搜索表明这应
在 angularjs 模块初始化期间有条件地注入依赖项

我有一个角度模块我想有条件地将依赖项注入其中 IE var myapp angular module myapp ngRoute myappcontroller ngGrid I want to include ngGrid only i
Chrome 内存/垃圾收集问题

我在使用 Chrome 时遇到内存垃圾收集问题我正在开发一个照片上传网站该网站允许我的客户使用 HTML5 和文件 API 拖放照片进行上传因此这在 IE 中不起作用它仅适用于 Chrome 和 FF 我还没有在 Safari O
Amcharts 图表 - 图表列到自定义 URL 的超链接以在新选项卡/窗口中打开

我正在尝试制作一个 amcharts 图表其中的列链接到自定义网址并希望网址在新选项卡窗口中打开我尝试将此代码添加到图形对象中但它不起作用它在同一选项卡窗口中打开链接 listeners event clickItem met
数据表“footerCallback”函数未在页脚中显示结果

我尝试获取每列的总和并将结果显示在页脚中我在用着页脚回调 https datatables net reference option footerCallbackDatatables提供的功能但是它在页脚中没有显示任何内容数据表解释
如何在启用导航栏的情况下打开新的浏览器窗口？

我有这个JS方法 function OpenLink strDestination var features left 10 top 10 location 0 menubar 0 resizable 0 scrollbars 1 stat
模型不是 AngularJS 中输入的日期对象

使用 AngularJS 我试图使用输入显示日期type date
自 2012 年 6 月 12 日以来，“未定义”随机附加在我网站上 1% 的请求网址中

自 2012 年 6 月 12 日 11 20 TU 起我在我的 varnish apache 日志中看到非常奇怪的错误有时当用户请求一页时几秒钟后我会看到类似的请求但 url 中最后一个之后的所有字符串已被未定义替换例子
将数组中的所有元素相乘

我在这里找不到我真正想要的例子我想将所有数组元素相乘因此如果数组包含 1 2 3 总和将为 123 6 到目前为止我已经得到了这段代码但它返回未定义 function multiply array var sum 1 for var
如何在服务器端按钮点击时关闭当前标签页？

我尝试在确认后关闭当前选项卡因此我将以下代码放在确认按钮的末尾但选项卡没有关闭 string jScript ClientScript RegisterClientScriptBlock this GetType keyClientBl
全局未在 ../node_modules/socket.io-parser/is-buffer.js 中定义

预先感谢您帮助我我正在尝试在我的一个角度组件中连接套接字但在浏览器的控制台中它会抛出一个错误指出 Global 未在 Object node modules socket io parser is buffer js 中定义这是我的
更改特定字符串的颜色

有谁知道如果将特定单词输入文本区域我如何更改它的颜色例如如果用户输入你好我的朋友它会动态地将你好更改为绿色在google上花了很多时间找不到任何相关的东西谢谢 textareas 的设计目的不是选择性着色
大型应用的回流/布局性能

我正在使用 GWT 构建一个 HTML 应用程序其性能总体上是正确的有时它会加载 DOM 中的许多对象并且应用程序会变得很慢我使用 Chrome 开发者工具分析器来查看时间花在哪里在 Chrome 下一旦应用程序被编译即没有
表单序列化javascript（无框架）

想知道 javascript 中是否有一个没有 jquery 或任何框架的函数可以让我序列化表单并访问序列化版本 2023 年更新 Use FormData https developer mozilla org en US docs We
如何上传文件 - sails.js

我可以下载图像和 pdf 但无法下载文档文件 doc pptx odt 下载文档 doc pptx odt 时仅将其下载为 ZIP XML 文件我可以做什么我在用着填写上传文件文档 https github com balderda
保持两个

webpack基础

webpack基础

webpack配置

webpack基础 的相关文章

webpack基础的相关文章