精华内容
下载资源
问答
  • webpack编译多个项目
    2022-06-20 11:49:37

    本文将介绍如何使用 Webpack 编译 .ts 文件。

    Webpack 配置

    Webpack 中的所有内容都从 Webpack 配置 开始。webpack.config.js 的关键部分是 module.rules 选项。这是您告诉 Webpack 在打包之前使用一个特殊的编译器来编译文件的地方。对于 TypeScript,除了 typescript 模块之外,您还需要 ts-loader 模块

    $ npm install typescript ts-loader

    module.rules 选项是一组规则数组。下面的 webpack.config.js 告诉 Webpack 使用该 ts-loader 模块编译任何以 .ts 结尾的文件。

    module.exports = {
      entry: './index.ts',
      output: {
        filename: 'main.js',
        path: `${process.cwd()}/dist`
      },
      module: {
        // 对任何以 .ts 结尾的文件使用 ts-loader
        rules: [
          {
            test: /\.ts$/,
            use: 'ts-loader',
            exclude: /node_modules/
          }
        ]
      },
      // 捆绑 .ts 文件和 .js 文件。
      resolve: {
        extensions: ['.ts', '.js']
      }
    }

    编译 TypeScript 文件

    下面是 index.ts 文件:

    const str: string = 'Hello World'
    
    console.log(str)

    您还需要添加一个 tsconfig.json 文件,否则 TypeScript 会出错。其规则根据您的项目制定:

    {
      "files": ["./index.ts"]
    }

    现在,运行 node ./dist/main.js,您将看到 Node 打印出 Hello World

    $ node ./dist/main.js 
    
    # Hello World

    更多资料

    更加详细内容请查阅 Webpack 编译 TypeScript 的官方指南

    更多相关内容
  • webpack编译多个html

    2021-06-04 16:07:48
    通过webpack编译打包多个html,通过webpack-dev-server自动刷新启动服务,解决webpack-cli跟webpack-dev-server版本不兼容问题

    通过webpack编译打包多个html,通过webpack-dev-server自动刷新启动服务,解决webpack-cli跟webpack-dev-server版本不兼容问题

    在安装webpack-cli 跟webpack-dev-server的时候,运行报下面的错就是版本不兼容,网上很多说卸载重装

    1先新建一个项目目录

    分别包含两个入口页:home跟about

    入口entry的配置如下:

    	entry: {
    		'assets/js/home': path.resolve(__dirname, './src/home/main.js'),
    		'assets/js/about': path.resolve(__dirname, './src/about/main.js'),
    	},

    entry接受三种形式的值:字符串,数组和对象,字符串跟数组都只是对象的简化形式

    字符串适用单入口页,这里用对象模式

    'assets/js/home‘会将入口是src下的home的main.js打包在assets下的js下

    output配置:

    	output: {
    		filename: '[name].bundle.js',
    		path: path.resolve(__dirname, './build'),
    		chunkFilename: '[name].bundle.js',
    	},

    主要的是plugin的配置,如何为各自的html自动打包生成一个对应的html并且在对应的html中只包含自己模块的打包的js主要通过chunks配置

    • chunks:允许插入到模板中的一些chunk,不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时,每个页面注入的thunk应该是不相同的,需要通过该配置为不同页面注入不同的thunk;

    plugins: [
    		new htmlWebpackPlugin({
    			template: './src/home/index.html',
    			filename: 'home.html',
    			chunks: ['assets/js/home'],
    		}),
    		new htmlWebpackPlugin({
    			template: './src/home/index.html',
    			filename: 'about.html',
    			chunks: ['assets/js/about'],
    		}),

     接下来是devServer的配置 opoenPage服务启动初始页面

    	devServer: {
    		contentBase: path.join(__dirname, 'build'),
        openPage:'home.html',
    		compress: true,
    		open: true,
    		port: 8080,
    	},

     

     

    展开全文
  • 本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue ...
  • webpack编译过程

    2022-04-14 23:46:08
    webpack 编译过程 文章目录webpack 编译过程初始化编译输出总过程 webpack 的作用是将源代码编译(构建、打包)成最终代码 整个过程大致分为三步骤 初始化 编译 输出 初始化 此阶段,webpack会将CLI参数、配置...

    webpack 编译过程


    webpack 的作用是将源代码编译(构建、打包)成最终代码
    在这里插入图片描述

    整个过程大致分为三个步骤

    1. 初始化
    2. 编译
    3. 输出
      在这里插入图片描述

    初始化

    此阶段,webpack会将CLI参数配置文件默认配置进行融合,形成一个最终的配置对象。

    对配置的处理过程是依托一个第三方库yargs完成的

    此阶段相对比较简单,主要是为接下来的编译阶段做必要的准备

    目前,可以简单的理解为,初始化阶段主要用于产生一个最终的配置

    编译

    1. 创建chunk

    chunk是webpack在内部构建过程中的一个概念,译为,它表示通过某个入口找到的所有依赖的统称。

    根据入口模块(默认为./src/index.js)创建一个chunk

    在这里插入图片描述

    每个chunk都有至少两个属性:

    • name:默认为main
    • id:唯一编号,开发环境和name相同,生产环境是一个数字,从0开始
    1. 构建所有依赖模块
      在这里插入图片描述

    AST在线测试工具:https://astexplorer.net/

    简图

    在这里插入图片描述

    1. 产生chunk assets

    在第二步完成后,chunk中会产生一个模块列表,列表中包含了模块id模块转换后的代码

    接下来,webpack会根据配置为chunk生成一个资源列表,即chunk assets,资源列表可以理解为是生成到最终文件的文件名和文件内容

    在这里插入图片描述

    chunk hash是根据所有chunk assets的内容生成的一个hash字符串
    hash:一种算法,具体有很多分类,特点是将一个任意长度的字符串转换为一个固定长度的字符串,而且可以保证原始内容不变,产生的hash字符串就不变

    简图

    在这里插入图片描述

    1. 合并chunk assets

    将多个chunk的assets合并到一起,并产生一个总的hash

    在这里插入图片描述

    输出

    此步骤非常简单,webpack将利用node中的fs模块(文件处理模块),根据编译产生的总的assets,生成相应的文件。

    在这里插入图片描述

    总过程

    在这里插入图片描述

    在这里插入图片描述

    涉及术语

    1. module:模块,分割的代码单元,webpack中的模块可以是任何内容的文件,不仅限于JS
    2. chunk:webpack内部构建模块的块,一个chunk中包含多个模块,这些模块是从入口模块通过依赖分析得来的
    3. bundle:chunk构建好模块后会生成chunk的资源清单,清单中的每一项就是一个bundle,可以认为bundle就是最终生成的文件
    4. hash:最终的资源清单所有内容联合生成的hash值
    5. chunkhash:chunk生成的资源清单内容联合生成的hash值
    6. chunkname:chunk的名称,如果没有配置则使用main
    7. id:通常指chunk的唯一编号,如果在开发环境下构建,和chunkname相同;如果是生产环境下构建,则使用一个从0开始的数字进行编号
    展开全文
  • 时间总是不等人的,一年的时间收获颇,感想也颇。怎么说呢,人大概就是这样吧,总是在当下幻想未来、怀念过去。走走停停,最后发现,现在就是最好的时刻。写写最近的感受吧,先提前提醒一下欧,有些感概(但是也...

    写在前面

    工作刚满一年,也停更了一年多。时间总是不等人的,一年的时间收获颇多,感想也颇多。怎么说呢,人大概就是这样吧,总是在当下幻想未来、怀念过去。走走停停,最后发现,现在就是最好的时刻。写写最近的感受吧,先提前提醒一下欧,有些感概(但是也不是特别伤感,是反省~~~~)。

    自己确实不是很自律,现在回头看,很后悔当初没有在合适的时间做合适的事情,虚度了不少光影。没办法啊,因为人总是懒惰的,惰性感很强啊。但是,不是还有句话叫:开始就不算晚,一切都还来得及。是的,一切都还来得及。

    2020 年疫情开始,现在已经 2022 年,时间过的很快,也很慢。最近几天,因为疫情的原因,一直在居家,所以想了很多有的没的,仔细回顾了过去的三年时间,发现自己的心态变了很多。性格依然没变,最大的变化是控制情绪的能力变差了,需要慢慢调整心态,静静心。

    另外,今天有关 mu5735 航班的消息太突然,又一次提醒我们:明天和意外哪一个先来是未知的。真的真的真的,需要把握好眼前的时间,不需要太努力,不需要有多大的目标,简单的顺其自然,最后自然会水到渠成。

    2022 年,我想,该拾起封藏很久的那颗初心,重新出发了!

    不需要时时刻刻提醒,只需要偶尔停下来,跟自己对话,同自己相处,让自己调整到最舒服方式的状态,然后继续出发。

    过渡

    上面随便写了一下,最近的感受。也许是太久没有做自我总结了,总会有一些前言不着后调的。我随便写写,大家就随便看看。但是不能不看哇,毕竟还得看技术内容啊。

    很多东西,都记在脑子里,加上平时用的少就太容易忘记了。最近,在做知识总结进行复习,能记录一点是一点吧。

    最近在复习 webpack,所以就写有关 webpack 的基础知识吧。

    webpack

    关于 webpack,很多童鞋应该不陌生。它是前端工程化的一个构建工具,给开发者带来了极大的便利。因为 webpack 的出现,让开发者只需要关注具体的业务功能。比如,webpack 把浏览器的兼容性、ES6 7 8 语法的兼容性等非业务功能部分都已经完成。通俗点说就是,开发者在进行开发时,不需要考虑各种代码的兼容性问题,怎么好用、怎么方便怎么来。

    首先,看个图:
    在这里插入图片描述

    图中有三个部分:

    • 左侧:源码部分。可理解成,项目的各个模块、图片、页面等资源。项目最终不会运行这部分代码。
    • 中间:就是今天的主角 —— webpack。它可以打包编译源码部分。webpack 编译运行的环境是 Node 环境。因为 webpack 不仅在浏览器端可用,在服务端也可用。
    • 右侧:webpack 对源码的打包结果。项目最终运行的代码。

    webpack 配置文件

    webpack 有自己的配置文件:webpack.config.js。用于配置 webpack 编译打包生成的结果。

    该配置文件是会在 webpack 编译打包过程中运行,意味着:该文件中的语法要使用 commonJS

    • webpack.config.js配置文件:默认导出一个配置对象
    module.exports = {
      mode: "development",
      entry: "./src/index.js", // 打包时的入口文件
      output: {
        filename: "main.js", // 打包结果的输出文件名:dist 目录下的文件
      },
      devtool: '', // 使用源码地图 source map,目的是便于调试 精准定位代码报错的源代码模块位置
    }
    

    webpack 编译结果浅析

    首先需要明确的是:

    1. webpack 解决了全局变量污染问题:支持模块化(commonJS 和 ES6 模块化);
    2. webpack 支持 commonJS 和 ES6 模块化两种模块化格式的使用,这里只分析了 commonJS 的使用方式;
    3. webpack 中的模块具有缓存机制,即多次同时导入同一个模块,该模块只会执行一次。

    编译结果分析

    1. commonJS 的模块化使用包含两部分:require(module_url)导入模块,module.exports导出模块;

    2. require(module_url)导入模块对于路径的模块,一个模块对应一个文件。模块路径是唯一的,作为模块的 ID

      • 模块导入时,先会判断导入的模块是否已经缓存过,如果存在缓存则之间返回缓存结果;
      • 否则,会先把模块内的代码先执行一遍,然后缓存已导入的模块;
    3. 关于 module.exportsexports,本质上导出的内容就是 module.exportsexports是的 module.exports引用结果。

    总的来说,其实就是实现 require 方法、模块缓存。同时,模块内的代码不会污染全局代码,即可使用立即执行函数实现。

    简单还原 webpack 的编译结果:

    /**
     * webpack 的编译原理
     * 采用立即执行函数:避免全局变量的污染
     */
    (function (module) {
      // 模块缓存机制
      var module_cache = {};
      // 导入函数
      function require(moduleId) {
        // 模块存在缓存,则直接返回缓存结果
        if (module_cache[moduleId]) {
          return module_cache[moduleId];
        }
        // 当前模块无缓存,运行当前模块
        module_cache[moduleId] = {};
        // require 导出的数据格式
        var module_webpack = {
          exports: {},
        };
        // 执行当前模块模块
        module[moduleId](module_webpack, module_webpack.exports, require);
        module_cache[moduleId] = module[moduleId]; // 缓存模块
        return module_webpack.exports; // 返回导出结果
      }
    
      // 运行入口模块
      require('./src/index.js');
    })({
      "./src/a.js": function (module, exprots, require) {
        const b = require('./src/b.js');
        console.log('module a');
        console.log('require b: ', b);
      },
      "./src/b.js": function (module, exprots, require) {
        module.exports = 'module b'
        console.log('module b');
      },
      "./src/index.js": function (module, exprots, require) {
        require('./src/a.js')
        require('./src/a.js')
        require('./src/a.js')
        require('./src/a.js')
        require('./src/a.js')
        require('./src/a.js')
        console.log('main.js')
      }
    })
    
    展开全文
  • webpack性能优化:提升webpack编译速度

    千次阅读 2021-03-04 09:18:27
    随着项目不断发展壮大,组件数量开始变得越来越项目也开始变得庞大,webpack编译的时间也会越来越久,我们现在的项目编译一次在40s ——70s之间,这是一效率非常低下的操作。优化的手段有很,之前项目原本...
  • 通过webpack编译构建微信小程序 使用 创建微信小程序时,将目录设到build/src下,本地的开发目录在src下 编译构建: $ npm run build 监听变化并重新编译 $ npm run watch 注意开发者工具上需要ctrl R(command R)...
  • 关于webpack编译ts项目报错Module not found背景解决过程相关知识补充学习模块模块解析反思 背景 最近需要封装JSSSDK,尝试使用webpack配合ts进行项目搭建,在编译时遇到下方问题: 从以上报错可知,入口文件为...
  • webpack4-html-demonpm install请先运行此命令加载依赖npm run start运行项目npm run build打包项目###一普通 html 项目的打包方案适合普通 html 页面打包src为工作目录 assets放需编译资源 static放无需编译...
  • 于是查找了好多优化webpack编译速度的方案。 优化点 很多个点(的配置)都会有影响。 以下列表中,禁用sourceMap这一条最有效(sourceMap生成花费了编译时间的80%以上)。 但没啥用,开发环境我还是得留着sourceMap方便...
  • webpack编译多页面vue项目的配置问题

    千次阅读 2017-07-17 14:59:55
    一般情况下,构建一vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 ...
  • 假设您有一个包含多个独立网页的项目。 独立的含义,不共享相同的javascript依赖项。 但是您想要: 使用webpack为每个page生成bundle.js 。 Webpack配置的某些部分将是通用的,但是每个页面的特定配置也是可能的。...
  • 一文掌握Webpack编译流程

    千次阅读 2020-06-18 19:09:42
    Webpack是基于事件流的插件集合,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,Tapable是一类似Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。...
  • )之所以提出这个问题, 是因为执行npm run dev 命令后, 控制台打印出了巨量的 v-for 没有key 的warning,导致无法正常的看到编译信息, 因为项目比较大, 文件(这个项目是多人完成的, 很处不规范)给每一个v-for 都...
  • 之前写的三篇文章,分别简单介绍了如何配置 webpack 完成 es6 代码编译、PostCSS 代码编译、以及 使用 webpack 管理资源文件。接下来将配置 webpack 完成 vue 代码的编译。 版本说明 本文使用的 webpack 的版本为:...
  • TypeScript打包 webpack整合 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包; TS同样也可以结合构建工具...npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plug
  • 前段时间第一次接触了layabox游戏引擎做了一个项目,由于ES6相当好用,所以在项目中使用了很的ES6语法,但是在发布的时候发现该引擎无法压缩ES6的代码,而不进行压缩的话则代码体积比较大 然后其实该引擎会将自己...
  • webpack多个js打包

    2020-04-28 16:06:52
    创建文件夹(dist) 用cnpm安装webpack cnpm install webpack --...添加一固定的js文件 webpack.config.js module.exports = { entry: ['./js/one1.js','./js/one2.js'],//js名字 output: { path:__dirname + '/...
  • node_modules/webpack/bin/webpack.js const path = require("path"); //"d:\workspace\webpack\demo\node_modules\webpack-cli\package.json" const pkgPath = require.resolve("webpack-cli/package.json"); con...
  • webpack从零搭建一个项目

    千次阅读 2021-11-14 17:30:55
    最近在做一关于webpack5手动搭建项目的测试练习,网上找了很文章,发现很文章按照他们的步骤搭建,都会有各种各样的报错,于是自己参考网上各类文章,加上自己的实际搭建,完成了这篇文章。如果有错误,欢迎在...
  • 编译提速 缩小查找范围 extensions require和import的时候可以省略扩展名,然后查找文件时的先后顺序会根据extensions的配置进行 比如: resolve: { extensions: ['.js', '.jsx', '.json'],//指定文件的扩展名,找...
  • webpack自动编译

    2019-04-17 20:32:53
    每次编译代码时,手动运行 npm run build 会显得很麻烦。 webpack 提供几种可选方式,帮助你在代码发生变化后自动编译代码: ...如果其中一文件被更新,代码将被重新编译,所以你不必再去手动运行整个构建。 p...
  • 3. 配置环境变量不允许有空格, 多个应用的环境变量名不允许重复, 经检测, 发现环境变量值是通过字符串解析的, 如果增加window变量, 解析会有误, 需在vue.config.js中修改底层源码
  • 基于webpack4.x项目实战2 - 配置一次,多个项目运行 基于webpack4.x项目实战3 - 手写一个cli 不久前,写过一篇webpack4的简单实践, 今天我们继续来webpack4.x的实战第二部分,只需要配置一次,就可以多个项目一起...
  • webpack 多个Entry 打包多页应用

    千次阅读 2019-06-02 16:25:50
    webpack下打包多个Html页面,可以由插件html-webpack-plugin 来完成; 另外一种插件:可以参考:web-webpack-plugin 可以看下基础篇 : 1:webpack环境搭建; 2: webpack导入vue项目 具体做法如下: webpack....
  • webpack编译过程中的报错汇总

    千次阅读 2018-08-01 17:49:09
    1、全局webpack安装环境和本地环境不一致: ...打开package.json,查看当前配置的webpack的版本,在现项目是3.0.0,运行编译命令webpack会报如下错误: compiling(node:15460) DeprecationWarning: Tapable.plugin ...
  • webpack 复习(三)编译过程分析

    千次阅读 2022-03-28 21:01:43
    1. 上一篇文章问题答案 2. webpack 编译流程分析
  • 2、在页面配置 js 文件中(比如 utils.js),把html-webpack-plugin 替换为html-webpack-plugin-for-multihtml 页面模板 var HtmlWebpackPlugin = require('html-webpack-plugin') 换成 var HtmlWebpackPlugin = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,533
精华内容 15,813
热门标签
关键字:

webpack编译多个项目