对于你如何在Webpack5中使用WebWorkers？感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍webpack入门进阶与调优，并为您提供关于#使用webpack进行版本管理工具(webp

对于你如何在 Webpack 5 中使用 Web Workers？感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍webpack入门进阶与调优，并为您提供关于# 使用webpack进行版本管理工具(webpack-plugin-auto-version)、(23/24) webpack实战技巧：如何在webpack环境中使用Json、53 webpack概念、webpack核心介绍、webpack使用、ES6+Webpack 下使用 Web Worker的有用信息。

• 你如何在 Webpack 5 中使用 Web Workers？（webpack入门进阶与调优）
• # 使用webpack进行版本管理工具(webpack-plugin-auto-version)
• (23/24) webpack实战技巧：如何在webpack环境中使用Json
• 53 webpack概念、webpack核心介绍、webpack使用
• ES6+Webpack 下使用 Web Worker

你如何在 Webpack 5 中使用 Web Workers？（webpack入门进阶与调优）

我发现了我的问题，

不正确的输出块：

output: {
    publicPath: path.resolve(__dirname,"js/dist/"),filename: "bundle.js",path: path.resolve(__dirname,'js/dist'),}

publicPath 在这种情况下设置为使用绝对路径。因此，当我尝试通过服务器运行它时，它将充当 file:// 而不是通过 http://。由于 Chrome（我相信大多数现代浏览器）出于安全原因不允许您将本地文件作为脚本加载，因此它阻止了它。

最初，我认为使用 typescript 可能存在某种问题，但是，我了解到这只是配置错误导致脚本始终使用绝对值。

更正输出块：

output: {
    publicPath: "js/dist/",}

# 使用webpack进行版本管理工具(webpack-plugin-auto-version)

使用webpack进行版本管理工具(webpack-plugin-auto-version)

出处: https://luoyangfu.com/detail/...

• GitHub [webpack-plugin-auto-version] https://github.com/zsirfs/web...
• npm [webpack-plugin-auto-version] https://www.npmjs.com/package...
• issue https://github.com/zsirfs/web...

距离1.2.3版本以及好几个月了，当时是因为在前端开发中经常会因为缓冲问题，导致最新版本和线上版本或者测试版本出现不同，bug得不到及时有效的修复，手动修改版本可以，但是费时费力，容易出错，设计到动态加载的位置，动态创建脚本的时候就会出错，所以有效的版本管理工具就是能够有效的利用version，自动的根据package.json中version更换major,minor,patch版本。看效果图:

插件提供配置项

{
    // 文件名替换标记 [version] -> v1.2.2
      filenameMark: options.filenameMark,
      // 版权名称
      copyright: options.copyright || ''[webpack-plugin-auto-version]'',
      // 保存的时候格式化package.json的indent
      space: options.space || 2,
      // 是否自动清理老版本
      cleanup: options.cleanup || false,
      // 是否检测资源内的标签
      inspectContent: options.inspectContent || !!options.template,
      // 自定义资源内版本替换模板 [VERSION]version[/VERSION]
      template: options.template || `[${this.copyright}]version[/${this.copyright}]`,
      // 自定义忽略后缀，默认是[''.html'']忽略html文件打入版本文件夹
      ignoreSuffix: [], // 忽略的后缀或者文件关键词
      isAsyncJs: false,
      htmlTempSuffix: [''.html'', ''.vm'', ''.ejs'', ''.handlbars'']
}

• filename: 文件名称标记
• copyright: 版权声明会出现在js，css，html文件头部

• space: 版本回存到package.json中的时候格式化间距默认为2字符(之后版本会默认读取.editconfig)
• cleanup: 自动清除

存在多个版本的时候可以设置为true，自动清除比当前版本低的文件夹

• inspectContent: 检测代码内是否有可替换为版本的模板，看设置option.template
• template: 替换的模板，默认是[webpack-plugin-auto-version]version[/webpack-plugin-auto-version]
• ignoreSuffix: 配置忽略后缀的文件存放到编译根目录下
• isAsyncJs: 配置是否是动态创建script的，动态创建script如果是更具publicPath则可用，会在publicPath加入版本号
• htmlTempSuffix: 按照html语法的后缀，默认是: html, ejs, handlebars,vm 文件等

插件使用方法

安装

npm/yarn:

npm i -D webpack-plugin-auto-version # yarn add -D webpack-plugin-auto-version

配置webpack.config.prod.js

const WebpackPluginAutoVersion = require(''webpack-plugin-auto-version'')

module.exports = {
    // ...忽略其他配置
    plugins: [
        // ...其他插件
        new WebpackPluginAutoVersion()
    ]
    
}

webpack 插件开发

使用webpack插件开发的话需要一个函数对象，函数对象对外暴露apply方法，apply参数有webpack的编译对象complier,其中包含webpack的配置项，编译支援，编译分块，还有webpack的钩子以及其他插件暴露的钩子函数。

看下面代码:

if (complier.hooks) {
      // 兼容webpack ^4.0.0
      complier.hooks.compilation.tap(''WebpackAutoVersionPlugin'', (compliation) => {
        compliation.hooks.htmlWebpackPluginBeforeHtmlGeneration &&
          compliation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync(
            ''WebpackAutoVersionPlugin'',
            htmlWebpackPluginBeforeHtmlGeneration(this)
          )
        compliation.hooks.htmlWebpackPluginAlterAssetTags &&
          compliation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(
            ''WebpackAutoVersionPlugin'',
            htmlWebpackPluginAlterAssetTags(this)
          )
        compliation.hooks.htmlWebpackPluginAfterHtmlProcessing &&
          compliation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(
            ''WebpackAutoVersionPlugin'',
            htmlWebpackPluginAfterHtmlProcessing(this)
          )
      })
    } else {
      // 如果存在html-webpack-plugin 则监听
      complier.plugin(''compilation'', (compilation) => {
        compilation.plugin(
          ''html-webpack-plugin-before-html-generation'',
          htmlWebpackPluginBeforeHtmlGeneration(this)
        )
        compilation.plugin(
          ''html-webpack-plugin-alter-asset-tags'',
          htmlWebpackPluginAlterAssetTags(this)
        )
        compilation.plugin(
          ''html-webpack-plugin-after-html-processing'',
          htmlWebpackPluginAfterHtmlProcessing(this)
        )
      })
    }

这里对html-webpack-plugin的钩子函数监听，配合html-webpack-plugin继续网页资源的构造,同时兼容webpack4.x || webpack3.x两种版本。

详细代码查看: L161

GitHub仓库: https://github.com/zsirfs/webpack-plugin-auto-version 欢迎star，fork

问题反馈: issues

(23/24) webpack实战技巧：如何在webpack环境中使用Json

在webpack1或者webpack2版本中，若想在webpack环境中加载Json文件，则需要加载一个json-loader的loader进来的。但是在webpack3.x版本中，则不需要在另外引入了，也可使用Json。

下面以webpack3.x为例来说明在webpack中如何使用json。（主要是读取Json内容）

1. webpack中如何使用json

第一步：创建json数据

在根目录下新建一个config.json文件，里面新增如下内容：

{
  "name": "wfaceboss",
  "net": "www.wfaceboss.top"
}

第二步：现在我们的index.html模板中新增一个层，并给层一个Id属性。

便于在javascript代码中可以方便引用。

<div id="json"></div>

第三步：修改入口文件

src/entry.js文件中新增下面代码：

var json =require(''./../config.json'');
document.getElementById("json").innerHTML="name:"+json.name+"  site:"+json.site;

第四步：启动服务查看效果

若此节是根据前面的教程配置了热打包的，此时直接在终端使用npm run server启动即可，便可在浏览器上看到输出效果。若没有配置热打包，则需要先打包后启动服务。

打包指令：

npm run dev

启动服务指令：

npm run server

输出结果为：

53 webpack概念、webpack核心介绍、webpack使用

53 webpack概念、webpack核心介绍、webpack使用

webpack概念

Webpack 前端资源模块化管理和打包工具。可以将许多松散的模块按照依赖和引用关系打包成符合生产环境部署的前端资源。并将按需加载的模块进行代码分隔，等到实际需要的时候再加载。

开发环境：我们本地的环境或测试环境 development

生产环境：线上环境，比如：我们昨天讲的环境部署 production

为什么学习webpack

搭建前端开发环境（vue、react）、热更新、代码压缩等

但是webpack又依赖node环境 。

node你接口不会写。你会安装node即可。

学习node的两层含义：1、写动态网站（写接口） 2、为前端开发环境服务

webpack官网

https://www.webpackjs.com/

准备工作

1、先安装node

2、安装webpack和webpack-cli

npm i webpack@4 webpack-cli@3 -g

webpack核心介绍

配置文件:webpack.config.js

注意：写js代码，同时webpack基于node，所以也可以写node相关的代码 （不是写http服务）。最多用上：path、和commonjs规范

webpack只认识js文件，像图片、css、字体件... webpack不认识，不认识的文件使用加载器处理

webpack有很多 的插件 。插件就是丰富webpack功能的。比如：压缩js

webpack使用

打包js代码

1、单入口单出口（主流）

/*
    webpack依赖node环境 。
    这个js文件中，写的虽然是js。但是所有的node相关的都可以写。
​
*/ 
const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.join( __dirname,'dist' ),//把entry（入口文件）打包到哪个目录 必须是个绝对路径
        filename:'bundle.js',//打包后生成的文件名
    }
}
​
//默认认为你要打包上线了，上线了就是说要部署到服务器生产环境（要把所有的代码压缩）

2、多入口单出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:['./main.js','./test1.js'],
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    }
}
​

3、多入口多出口

module.exports = {
    context:path.join(__dirname,"src"),
    entry:{
        first:'./main.js',
        second:'./test1.js'
    },
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name].js'
    }
}
​

打包css

webpack是基于node的。而node只认识js文件。css是不能直接打包的。所以要找对应认识某文件的loader（加载器）

module属性。

讲这个案例的目的：

1、处理不了文件用对应的loader。webpack对一些loader模块的版本是有要求 。

2、devDependencies深刻认识。（开发依赖） devpendencies：项目依赖

步骤：

css-loader 3版本 style-loader 2版本

npm i css-loader@3 style-loader@2 -D

devDependencies： 开发依赖（上线是不需要的，只是开发的时候才使用），只开发阶段使用，线上不需要。

dependencies：项目依赖，无论上线还是开发阶段都需要，

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

分离css

extract-text-webpack-plugin@next 插件

安装下载

npm i extract-text-webpack-plugin@next -D

加载器修改配置

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
rules: [ // 加载器的使用规则
	{
		test: /\.css$/,
		use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。
			fallback: "style-loader", 
        	use: "css-loader"  // loader被用于将资源转换成一个CSS单独文件
        })
	}
]

插件配置

new ExtractTextPlugin("style.css"), // 输出的文件名

报错说明：

Error: Cannot find module 'webpack/lib/Chunk'

解决方案：在项目目录下下载webpack@4

打包less

npm i less@3 less-loader@7 -D

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

{ 
	test: /\.less$/, 
	use: ExtractTextPlugin.extract({ 
		fallback: "style-loader", 
		use: ['css-loader', "less-loader"]
	})
}

npm i html-webpack-plugin@4 -D

plugins:[
        new HtmlWebpackPlugin({ // 插件配置对象
            title: "webpack 的使用",
            filename: "index.html", // 产出文件名(在dist目录查看)
            template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)
            favicon: "./assets/favicon.ico", // 插入打包后的favicon图标
            minify: {                             //对html文件进行压缩，
                    collapseBooleanAttributes: true,  //是否简写boolean格式的属性如：disabled="disabled"简写为disabled
                    minifyCSS: true,                  //是否压缩html里的css（使用clean-css进行的压缩） 默认值false
                    minifyJS: true,                   //是否压缩html里的js（使用uglify-js进行的压缩）
                    removeAttributeQuotes: true,      //是否移除属性的引号 默认false
                    removeComments: true,             //是否移除注释 默认false
                    removeCommentsFromCDATA: true,    //从脚本和样式删除的注释, 默认false
             }
        }) // 数组元素是插件的new对象
    ]

npm i url-loader file-loader -D

 {
       test: /\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件
        use: 'url-loader'
 }

// 如果处理字体图标需要引入这个
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader'
}

devServer: { // 在这里可以对webpack-dev-server进行一些配置
        port: 9090, //修改端口号，默认为8080
        open: true, // 自动调用默认浏览器打开
}

$ npm install -D worker-loader
# 或
$ yarn add worker-loader --dev
复制代码

// main.js
var MyWorker = require("worker-loader!./file.js");
// var MyWorker = require("worker-loader?inline=true&fallback=false!./file.js"); var worker = new MyWorker(); worker.postMessage({a: 1}); worker.onmessage = function(event) { /* 操作 */ }; worker.addEventListener("message", function(event) { /* 操作 */ }); 复制代码

{
  module: {
    rules: [
      {
        // 匹配 *.worker.js
        test: /\.worker\.js$/,
        use: { loader: ''worker-loader'', options: { name: ''[name]:[hash:8].js'', // inline: true, // fallback: false // publicPath: ''/scripts/workers/'' } } } ] } } 复制代码

import Worker from ''./file.worker.js'';
复制代码

{
  loader: ''worker-loader''
  options: { inline: true }
}
复制代码

// This will cause the worker to be downloaded from `/workers/file.worker.js`
import Worker from ''./file.worker.js'';
复制代码

{
  loader: ''worker-loader''
  options: { publicPath: ''/workers/'' }
}
复制代码

output: {
  path: DIST_PATH,
  publicPath: ''/dist/'',
  filename: ''[name].bundle.[hash:8].js'', chunkFilename: "[name].chunk.[chunkhash:8].js", globalObject: ''this'', }, 复制代码

// 应用文件 app.js
var worker = new Worker(''./my.worker.js''); // 传入 worker 脚本文件的路径即可 复制代码

// 创建 worker 实例
var worker = new Worker(''./my.worker.js''); // 传入 worker 脚本文件的路径即可 // 监听消息 worker.onmessage = function(evt){ // 主线程收到工作线程的消息 }; // 主线程向工作线程发送消息 worker.postMessage({ value: ''主线程向工作线程发送消息'' }); 复制代码

// 监听消息
this.onmessage = function(evt){ // 工作线程收到主线程的消息 }; this.postMessage({ value: ''工作线程向主线程发送消息'' }); 复制代码

var worker = new Worker(''./worker.js'');
// ...一些操作
worker.terminate();
复制代码

self.close();
复制代码

worker.addEventListener(''error'', function (e) {
  console.log(''MAIN: '', ''ERROR'', e); console.log(''filename:'' + e.filename + ''-message:'' + e.message + ''-lineno:'' + e.lineno); }); 复制代码

importScripts();                        /* 什么都不引入 */
importScripts(''foo.js'');                /* 只引入 "foo.js" */
importScripts(''foo.js'', ''bar.js''); /* 引入两个脚本 */ 复制代码