webpack 增加context_webpack context - CSDN
精华内容
参与话题
  • webpack 之 require.context 用法

    万次阅读 2019-06-16 21:46:54
    最近项目中用到了vue-element-admin当作框架,当中有一个很好的例子:封装了一个svg的组件,其中就是用到了... | 看下webpack官方的介绍: require.context点击打开链接 You can create your own context with ...

        最近项目中用到了vue-element-admin当作框架,当中有一个很好的例子:封装了一个svg的组件,其中就是用到了require.context,然后就出查了相关的介绍,当时也是一头雾水,最后决定弄明白这个东西。

      | 看下webpack官方的介绍:

     

    require.context 点击打开链接

    You can create your own context with the require.context() function.

    It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

    webpack parses for require.context() in the code while building.

    The syntax is as follows:

    require.context(directory, useSubdirectories = false, regExp = /^\.\//)
    

    Examples:

    require.context("./test", false, /\.test\.js$/);
    // a context with files from the test directory that can be required with a request endings with `.test.js`.
    
    require.context("../", true, /\.stories\.js$/);
    // a context with all files in the parent folder and descending folders ending with `.stories.js

     

        啥意思呢,就是说啊,这玩意的目的啊就是为了省事,通常我们可能会在多个页面require 同一个组件,数量少还行,多了的话就很蛮烦,维护起来也费劲。这个时候require.context 就排上用场了,一次性引入。

     

       | 首先介绍下入参 :

            1. 你要引入文件的目录

            2.是否要查找该目录下的子级目录

            3.匹配要引入的文件

       | 返回值是一个function:

    function webpackContext(req) {
    	return __webpack_require__(webpackContextResolve(req));
    }

        这个function有三个属性:resolve 、keys、id

            · resolve: 是一个函数,他返回的是被解析模块的id

            · keys: 也是一个函数,他返回的是一个数组,该数组是由所有可能被上下文模块解析的请求对象组成

            · id:上下文模块的id

         | 用法:

     

             拿该目录为例

             

               要引入svg下面所有的svg文件:

                在该文件(icons)目录下新建一个js文件index.js 写如下代码:

    let requireAll = requireContext => requireContext.keys().map(requireContext)
    let req = require.context('./svg', false, /\.svg$/)
    requireAll(req)

    我们只需要将改index.js 引入,就可以将svg目录下所有的svg文件都引入到项目中了。

     

     

     

     

     

     

     

     

    展开全文
  • 使用webpack合并js文件

    万次阅读 2017-07-11 17:35:54
    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。在代码实践之前,先说一写webpack的基础知识。1、为什要使用WebPack现今的很多网页...

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

    在代码实践之前,先说一写webpack的基础知识。

    1、为什要使用WebPack

    现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

    • 模块化,让我们可以把复杂的程序细化为小的文件;
    • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
    • Scss,less等CSS预处理器

    2、什么是Webpack

    WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

    3、WebPack和Grunt以及Gulp相比有什么特性

    其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

    Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具之后可以自动替你完成这些任务。
    这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。

    这里写图片描述

    Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

    这里写图片描述

    从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。

    如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。


    接下来我们简单为大家介绍
    Webpack如何将多个js文件合并(注意这里只是文件的合并,即将多个写好的js合成一个js文件,以减少http请求)。

    安装webpack

    在安装 Webpack 前,你本地环境需要支持 node.js。安装node.js可以参考node官方文档。

    使用如下命令在全局安装webpack。

    $ npm install webpack -g

    webpack已经安装到计算机上,现在可以使用webpack命令了。

    在项目中使用webpack

    使用以下命令在项目根目录下生成package.json文件。

    $ npm init

    安装webpack到项目中

    将webpack加入到pageage.json配制文件中,使用以下命令:

    $ npm install --save-dev webpack

    此时再看package.json文件,对比package.json刚刚创建时,新增加了一段代码。
    这里写图片描述

    配置webpack.config.js文件

    在项目的根目录下新建一个webpack.config.js文件。配置文件如下:

    这里写图片描述

    • context

    上下文选项用来决定根目录(即绝对路径)的入口文件

    • entry

    打包文件的入口点。

    • output

    output选项告诉webpack如何编译文件到硬盘中,值得注意的是,虽然entry中可以使用一个对象传入多个入口点文件,但是只能给ouput设置一个配置项。

    最后,我们将上面的js合并成了一个single.js。只要在项目中引入这个js即可。

    参考链接:https://segmentfault.com/a/1190000006178770

    展开全文
  • vue / vue-cli升级webpack4

    千次阅读 2018-06-27 23:55:13
    vue升级webpack4.x webpackwebpack-dev-server版本不兼容 > smart-video-mobile@0.1.0 dev F:\project\公司\智能工厂\smart-video-mobile &...

    vue升级webpack4.x


    升级包

    首先升级开发依赖中webpack构建流程中用到的loaderplugin以及它们的相关依赖升级到最新版本

    yarn upgrade -L

    安装包

    webpack4.x 需要依赖webpack-cli

    yarn add webpack-cli --dev

    需要特别注意的依赖包extract-text-webpack-plugin

    因为extract-text-webpack-plugin的最新正式版还没有对webpack4.x进行支持,所以有两个选择,第一个是:yarn upgrade extract-text-webpack-plugin@next升级到测试版,第二个是换成mini-css-extract-plugin,作者在这采用的第一种方案。

    修改配置文件

    webpack4内置了optimization.splitChunks、optimization.runtimeChunk代替CommonsChunkPlugin,
    内置了optimization.noEmitOnErrors代替NoEmitOnErrorsPlugin
    内置了optimization.namedModules代替NamedModulesPlugin
    下面针对配置文件进行修改

    修改开发环境webpack.dev.conf.js

    增加设置modedevelopment,删除DefinePluginplugin中的环境变量设置,如果只用来设置环境变量,可以删除插件;
    注释webpack.NamedModulesPluginwebpack.NoEmitOnErrorsPlugin

    const devWebpackConfig = merge(baseWebpackConfig, {
      mode: 'development',
      // ....
      plugins: {
          // new webpack.NamedModulesPlugin(), 
          // new webpack.NoEmitOnErrorsPlugin(),
      }

    修改生产环境webpack.prod.conf.js

    增加设置modeproductionoptimization配置;删除DefinePluginplugin中的环境变量设置,如果只用来设置环境变量,可以删除插件;
    注释webpack.optimize.CommonsChunkPluginuglifyjs-webpack-pluginwebpack.optimize.ModuleConcatenationPlugin
    如果npm run build时报错Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css,将contenthash换成hash即可

    const webpackConfig = merge(baseWebpackConfig, {
      mode: 'production',
      // ....
     optimization: {
        splitChunks: {
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              // test: path.resolve(__dirname, "node_modules"),
              chunks: 'initial',
              name: 'vendor'
            },
            'async-vendor': {
              test: /[\\/]node_modules[\\/]/,
              // test: path.resolve(__dirname, "node_modules"),
              chunks: 'async',
              name: 'async-vendor'
            }
          }
        },
        runtimeChunk: {
          name: 'manifest'
        }
      },
      // ....
      plugins: {
      // 如果`npm run build`时报错
      // `Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css`
      // 将`contenthash`换成`hash`,也可删除不用hash值`[name].css`
          new ExtractTextPlugin({
              filename: utils.assetsPath('css/[name].[hash].css'),
              allChunks: true,
          }),
      }
     }

    修改webpack.base.conf.js

    如果出现vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.,需要修改文件,具体请看错误记录

    以上是对此次升级的总结,下面试升级过程中遇到的错误记录

    错误记录

    • webpack与webpack-dev-server版本不兼容
    module.js:549
        throw err;
        ^
    Error: Cannot find module 'webpack/bin/config-yargs'

    升级webpack-dev-server版本

    • 缺少webpack-cli
    
    The CLI moved into a separate package: webpack-cli.
    Please install 'webpack-cli' in addition to webpack itself to use the CLI.
    -> When using npm: npm install webpack-cli -D
    -> When using yarn: yarn add webpack-cli -D
    module.js:549
        throw err;
        ^
    Error: Cannot find module 'webpack-cli/bin/config-yargs'

    安装webpack-cli

    • npm run dev 报错
      10% building modules 1/1 modules 0 active(node:28356) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    (node:28356) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instea  10% bu           10% building modules 7/10 modules 3 active …es\webpack-dev-server\client\overlay.jsF:\project\\smart-video-mobile\node_modules\html-webpack-plugin\lib\compiler.js:81
            var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {

    需要升级html-webpack-plugin

    • 升级webpack之后与各种loader和依赖包可能存在版本不兼容问题,需要升级包的版本
    Module build failed (from ./node_modules/eslint-loader/index.js):
    TypeError: Cannot read property 'eslint' of undefined

    eslint-loader不兼容

    • vue-loader引发的问题
    Module Error (from ./node_modules/vue-loader/lib/index.js):
    vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

    这里写图片描述
    需要增加这两处。

    • No PostCSS Config found in
      没有postCSS配置文件,在项目根目录下添加.postcssrc.js文件
    module.exports = {
        plugins: {
            autoprefixer: {}
        }
    }
    • 更换CommonsChunkPlugin
      在webpack4中移除了CommonsChunkPlugin,使用SplitChunksPlugin

    • Warning:mode config

    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more:

    需要配置mode,dev.conf中为development,prod.conf中为production

    const webpackConfig = merge(baseWebpackConfig, {
      mode: 'production',
      module: {
        rules: utils.styleLoaders({
        ........
    
    const devWebpackConfig = merge(baseWebpackConfig, {
      mode: 'development',
      module: {
        rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
      },
      ..........
    • 基本可以运行 了,如果后续发现问题会更新,也欢迎提出问题
    • 如果问题请指正,谢谢
    展开全文
  • 这两个插件可以对第三方NPM包预编译,生成*.dll.js,在项目启动和开发中不停的反复Ctrl+S的时候,webpack就不需要每次都重新编译那些固定不变的NPM包了,大大提升编译速度。 1. 新建一个webpack.dll.config.js : ...
    • 现在因为有HMR局部热更新,所以dllPlugin这两个插件用得少了,不过还是记录一下配置方法,可能以后会再次使用。
    • 这两个插件可以对第三方NPM包预编译,生成*.dll.js,在项目启动和开发中不停的反复Ctrl+S的时候,webpack就不需要每次都重新编译那些固定不变的NPM包了,大大提升编译速度。

      1.

      新建一个webpack.dll.config.js :
      (我是创建在根目录下的)

    const path = require("path");
    const webpack = require("webpack");
    const pkg = require('./package.json'); // 引入package.json
    module.exports = {
        entry: {
            vendor: Object.keys(pkg.dependencies) // 遍历package.json的所有依赖包
        },
        output: {
            path: path.join(__dirname, 'dll'), // 生成的文件存放路径
            filename: '[name].dll.js', // 生成的文件名字(默认为vendor.dll.js)
            library: '[name]_library'  // 生成文件的映射关系,与下面DllPlugin中配置对应
        },
        plugins: [
            new webpack.DllPlugin({
                // 会生成一个json文件,里面是关于dll.js的一些配置信息
                path: path.join(__dirname, 'dll', '[name]-manifest.json'),
                name: '[name]_library', // 与上面output中配置对应
                context: __dirname // 上下文环境路径(必填,为了与DllReferencePlugin存在与同一上下文中)
            })
        ]
    };

    2.

    原webpack.dev.config.js (即开发环境所用到的webpack配置文件):
    在plugins字段中增加DllReferencePlugin插件

    plugins: [
            new webpack.DllReferencePlugin({
                context: __dirname, // 与DllPlugin中的那个context保持一致
                /** 
                    下面这个地址对应webpack.dll.config.js中生成的那个json文件的路径
                    这样webpack打包时,会检测此文件中的映射,不会把存在映射的包打包进bundle.js
                **/
                manifest: require('./dll/vendor-manifest.json')
            }),
            // ...
        ]

    3. 引入index.html

    需要在项目index.html中引入上面生成的dll.js文件

    <script src="/vendor.dll.js"></script>
    // 注意1: vendor.dll.js必须在bundle.js之前引入,因为bundle.js依赖vendor.dll.js。
    // 注意2: 这个路径啊,我因为用的是webpack-dev-middleware自定义的服务,所以需要我自己提供/vendor.dll.js的访问。我使用的是express,所以我配置了:app.use(express.static('dll')); 所以访问路径直接就是"/vendor.dll.js"
    // 如果用的webpack.dev.server,好像就不用担心这个

    4.

    package.json文件中添加一条用于预编译的指令:

    "scripts": {
        "dll": "webpack -p --config webpack.dll.config.js --progress --profile --colors",
        "start": "node server.js",
      }

    5

    执行npm run dll,打包好dll
    再执行npm run start, 运行开发环境
    就OK了

    唯一麻烦的是,每次有依赖包升级或加入了新的包,都得手动run dll一下。
    但有个优秀的自动化插件可以解决:
    autodll-webpack-plugin,可以全自动化,但webpack4.0+之后,作者还没有更新完毕,目前(2018/04/25)使用会报错

    展开全文
  • 翻译了webpack官方英文文档,整合互联网上对webpack介绍的教程,完整全面的认识使用webpack
  • 本文主要记录笔者在使用webpack抽取css时遇到的一些问题。 参考文档: ...项目的初始诉求是利用webpack来管理css(合并),并增加hash(性能优化),当前项目使用w...
  • 在用vue做了3年前后端分离之后(通过anyproxy做代理),才发现webpack自带更方便的代理 配置文件 找到文件/config/index.js 在proxyTable选项增加下面的配置,可配置多个不同的代理 proxyTable: { '/dev': { ...
  • 配置文件如下 /** * Created by oufeng on 2017/5/6...const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.export
  • webpack学习笔记

    千次阅读 2015-08-02 17:07:51
    是什么webpack是一个模块打包工具,通过依赖处理模块,并生成那些模块静态资源。 观察上图,webpack把所有的资源(js,css和图片等)都当做是模块——webpack中可以引用css,css中可以嵌入图片dataUrl,对于不同...
  • vue-cli的webpack模板项目配置文件分析

    万次阅读 多人点赞 2017-09-11 11:51:10
    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会“太折腾...
  • 基于webpack的模块化构建

    千次阅读 2016-02-02 15:35:12
    写在前面模块化构建会让项目的拓展性、代码复用性和可维护性大大提高,初期可能会增加一些管理的工作量。但是对长远来说绝对是值得的,一个良好的模块化方案会让维护工作变得轻松,这个好处项目越进展到后来越明显。...
  • 自动加载路由-webpack require.context

    千次阅读 2020-08-07 19:19:40
    vue项目中,每添加一个模块都需要去引入并注册到路由表中,webpack中的require.context这个API将会解决这个问题,大大提升了我们的工作效率。 不妨去看看我们的路由表,三四个模块就需要200行以上的代码量,而且我...
  • webpack 插件 svg-sprite-loader

    万次阅读 2017-09-15 09:23:20
    最近开始看 Vue 了,首先用官方的模版把项目快速搭建起来: Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页...现在的项目 webpack 几乎是标配了,各种插件好用到爆。现在我们要接触的是一个叫 svg-sprite
  • 使用webpack-dev-server时NodeJS可用内存配置调整 现象 使用webpack-dev-server开发时内存可能占用比较多,导致部分场景下内存溢出而退出. <--- Last few GCs ---> ...
  • webpack 性能调优与 Gzip 原理

    千次阅读 2019-01-12 19:37:48
    从本节开始,我们进入网络层面的性能优化世界。 大家可以从第一节的示意图中看出,我们从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连接 ... 对于 DNS 解析和 TCP 连接两个...
  • vue项目的webpack构建优化

    千次阅读 2020-10-14 16:03:32
    vue项目的webpack构建优化 值得一提的是,在说webpack的速度优化之前,按需加载和按需引入,是你先要做好的,之后再说速度优化的问题。 按需加载,参考:https://segmentfault.com/a/1190000011519350 对参考博客...
  • 详解前端模块化工具-Webpack

    千次阅读 2015-11-09 14:58:47
    React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知。那么webpack有哪些优势,可以成为最主流的React开发工具呢?webpack是什么CommonJS和AMD是用于JavaScript模块管理的...
  • Webpack&React (三) 使用Webpack

    千次阅读 2016-02-15 16:13:47
    在GitHub上发现的学习webpack和react的很好的文章,原文链接通过看前两篇文章你可能对Webpack有了一些了解,它是一个模块购建工具,可以打包你的文件.听起来容易,实际上却不简单,我们都不想自已处理所有细节,这正是...
  • Webpack常用插件总结

    千次阅读 2019-02-28 11:33:13
    刚完成一个基于React+Webpack的项目,渐渐地熟悉了Webpack的一些配置,开发过程中用到了不少Webpack插件,现在把觉得有用的Webpack插件总结一下当巩固学习啦,主要涉及热模块替换[Hot Module Replacement]、...
  • 1.安装插件html-webpack-plugin 在终端输入命令如下: cnpm install html-webpack-plugin –save-dev2.进入webpack.config.js,加入一行代码,引用该插件,var htmlWebpackPlugin = require('html-webpack-plugin'...
1 2 3 4 5 ... 20
收藏数 2,616
精华内容 1,046
关键字:

webpack 增加context