精华内容
下载资源
问答
  • 出现问题 问题描述 主要是webpack打包时出现问题报错如上 发现vue-loader 和 vue-template-compiler 版本不匹配 解决方法 npm instll npm update 之后再运行就解决了

    出现问题
    在这里插入图片描述
    问题描述
    主要是webpack打包时出现问题报错如上
    发现vue-loader 和 vue-template-compiler 版本不匹配

    解决方法
    npm instll
    npm update

    之后再运行就解决了

    展开全文
  • } webpack 4 module: { rules: [ { test: /\.vue$/, use: 'vue-loader' }, { test: /\.css$/, use: [ { loader: 'vue-style-loader' }, { loader: 'css-loader', options: { sourceMap: true } }, ] }, { test: /\....
    温故而知新
    
    • SASS允许一个选择器,继承另一个选择器。
    • @extend
     .class1 {
        border: 1px solid #ddd;
      }
    
    • class2要继承class1,就要使用@extend命令:
    	.class2 {
        @extend .class1;
        font-size:120%;
      }
    
    • mixin
    @mixin left {
        float: left;
        margin-left: 10px;
      }
    
    • 使用@include命令,调用这个mixin。
    	 div {
        @include left;
      }
      
      @mixin left($value: 10px) { // 设置默认值
        float: left;
        margin-right: $value;
      }
    
    	div {
        @include left(20px);
      }
    
    今日要在项目中 引入mixin的写法,但是需要每个模块都引入一次,比较麻烦。
    便找了一种全局引入的方法,亲测有用
    
    • 安装sass-resources-loader依赖
    • 在main.js中引入mixin.scss
    • 在vue-config.js中进行配置
    • vue-cli@3
    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
          item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              // Provide path to the file with resources
              resources: './path/to/resources.scss',
    
              // Or array of paths
              resources: ['./path/to/vars.scss', './path/to/mixins.scss', './path/to/functions.scss']
            })
            .end()
        })
      }
    }
    
    • vue-cli@2
    if (loader === 'sass') {
      loaders.push({
        loader: 'sass-resources-loader',
        options: {
          resources: 'path/to/your/file.scss',
        },
      });
    }
    
    • webpack 4
     module: {
        rules: [
          {
            test: /\.vue$/,
            use: 'vue-loader'
          },
          {
            test: /\.css$/,
            use: [
              { loader: 'vue-style-loader' },
              { loader: 'css-loader', options: { sourceMap: true } },
            ]
          },
          {
            test: /\.scss$/,
            use: [
              { loader: 'vue-style-loader' },
              { loader: 'css-loader', options: { sourceMap: true } },
              { loader: 'sass-loader', options: { sourceMap: true } },
              { loader: 'sass-resources-loader',
                options: {
                  sourceMap: true,
                  resources: [
                    resolveFromRootDir('src/styles/variables.scss'),
                  ]
                }
              }
            ]
          }
        ]
      }
    
    • 配置好后,重启服务,在需要的组件中直接用就好

    sass-resources-loader原码链接

    展开全文
  • Customize webpack loader 自定义 webpack loaderWhat is webpack loader?webpack里几个重要概念编写loader的几个原则 Write a loader最裸体的loader第三方库跟你更多结果和参数异步返回如何操作源代码 What is ...


    第一次写博客,觉得有用的将就着看吧

    What is webpack loader?


    webpack can only process JavaScript natively, but loaders are used to transform other resources into JavaScript.
    Plugin System,webpack features a rich plugin system. Most internal features are based on this plugin system
    webpack 通常只能处理原生态的JS,但是loader能用于将其他资源转换为javascript。

    webpack里几个重要概念

    Entry:入口
    Module:模块
    Chunk:代码块
    Loader:模块转换器,用于把模块原内容按照需求转换成新内容
    Plugin:扩展插件
    想学习参透webpack的运行工作机制,可以参考这篇文章,写的非常到位
    https://mp.weixin.qq.com/s/IBcmdYCrKKoh9Zum22Tjig

    编写loader的几个原则 Write a loader

    1.单一职责
    2.链式组合
    3.模块化
    4.无状态
    (最好同步参考《代码整洁之道》)

    最裸体的loader

    module.exports = function(source) {
      // source 为 compiler 传递给 Loader 的一个文件的原内容 或 为串联loader中前一个loader的返回值
      // do some conversion
      // 该函数需要返回处理后的内容,若改loader为串联loader中的最后一个,需返回js代码
      return source;
    };
    

    第三方库

    需要用到的工具,例如:

    import loaderUitls from 'loader-utils';
    
    export default function(source) {
      const options = loaderUitls.getOptions(this);
      return `export default ${ JSON.stringify(source) }`;
    };
    

    更多的结果和参数

    返回其他结果的情况可以调用webpack的api接口callback()

    export default function(source) {
      this.callback(error, source, sourceMaps, ast);
      return;
    }
    

    异步返回

    export default function(source) {
      const callback = this.async();
      someAsyncOperate(source, () => {
        callback(error, source, sourceMaps, ast);
      })
      return;
    }
    

    如何操作源代码

    项目中我们使用了Acorn

    const { Parser } = require('acorn');
    
    const astree = Parser.parse(source, {sourceType: 'module', ecmaVersion: '2015'})
    

    sourceType :这个配置项有两个值:module 和 script,默认是 script;主要是严格模式和 import/export 的区别
    ecmaVersion
    onComment :传入一个回调函数,每当解析到代码中的注释时会触发,参数列表是:[block, text, start, end] ,block 是否是块注释,text 注释内容,start 和 end 是注释开始和结束的位置
    (更多操作请查阅官方的文档,下一篇大致记录一下AST,并且在loader中如何利用AST抽象语法树使我们的loader更为健壮)

    展开全文
  • webpack-loader

    2020-02-18 16:50:45
    loader webpack做的事情,仅仅是分析...webpack loaderloader本质上是一个函数,它的作用是将某个源码字符串转换成另一个源码字符串返回。 loader函数的将在模块解析的过程中被调用,以得到最终的源码。 全流程...

    loader

    webpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。
    更多的功能需要借助webpack loaders和webpack plugins完成。

    webpack loader: loader本质上是一个函数,它的作用是将某个源码字符串转换成另一个源码字符串返回。

    在这里插入图片描述loader函数的将在模块解析的过程中被调用,以得到最终的源码。

    全流程:

    在这里插入图片描述

    chunk中解析模块的流程:

    在这里插入图片描述chunk中解析模块的更详细流程:

    在这里插入图片描述处理loaders流程:

    在这里插入图片描述loader配置:

    完整配置

    module.exports = {
        module: { //针对模块的配置,目前版本只有两个配置,rules、noParse
            rules: [ //模块匹配规则,可以存在多个规则
                { //每个规则是一个对象
                    test: /\.js$/, //匹配的模块正则
                    use: [ //匹配到后应用的规则模块
                        {  //其中一个规则
                            loader: "模块路径", //loader模块的路径,该字符串会被放置到require中
                            options: { //向对应loader传递的额外参数
    
                            }
                        }
                    ]
                }
            ]
        }
    }
    

    简化配置

    module.exports = {
        module: { //针对模块的配置,目前版本只有两个配置,rules、noParse
            rules: [ //模块匹配规则,可以存在多个规则
                { //每个规则是一个对象
                    test: /\.js$/, //匹配的模块正则
                    use: ["模块路径1", "模块路径2"]//loader模块的路径,该字符串会被放置到require中
                }
            ]
        }
    }
    
    展开全文
  • 第 9 阶段:搞懂、搞透前端构建第3天网上看了很多讲 webpackloader,受益颇深,今天从我个人的角度来讲讲什么是 loader。理解 loader 最关键的点是如何自...
  • webpack中使用css文件配置 如果需要使用css文件,同时又不想将每一个css文件都依次加入html,我们只想要一个入口main.js放入html, 首先要在main.js里引入所需的css文件 /*依赖css文件*/ require('./css/normal.css')...
  • 在构建webpack应用程序时忽略某些文件。 安装 $ npm install --save-dev ignore-loader 用法(忽略所有.css ) 在webpack.config.js module . exports = { // other configurations module : { loaders : [ { ...
  • webpack-loader的使用

    2021-01-05 22:59:28
    webpack loader地址:https://webpack.docschina.org/loaders/ 比如我们现在安装css-loader 终端输入: npm install --save-dev css-loader 和 npm install --save-dev style-loader 因为css-loader 只负责载入css...
  • 本文将简单介绍webpack loader,以及如何去编写一个loader来满足自身的需求,从而也能提高对webpack的认识与使用,努力进阶为webpack配置工程师。 Webpack Loader webpack想必前端圈的人都知道了,大多数人也都...
  • WebPack Loader

    2016-02-03 17:46:18
    WebPack Loader什么是webpack loaderWebpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为...
  • webpack-loader和plugins

    2020-08-23 16:03:36
    loader一、loader1.处理loaders流程2.loader配置3.loader匹配规则二、plugin1....webpack loaderloader本质上是一个函数,它的作用是将某个源码字符串转换成另一个源码字符串返回。 loader函数的将在模块
  • webpack-file-loader

    2020-05-18 13:49:57
    1.什么是loader? webpack的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件, ...用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader 2.如何使用loader webpack中的
  • webpack loader

    2019-04-04 13:18:40
    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。 如果我们需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader 第一步:下载依赖的库 cnpm ...
  • vue-loaderwebpack

    2016-05-12 16:21:23
    参考[1] Vue.js build set-up from scratch with webpack, vue-loader and hot reload [2] Vue笔记二:进阶[译]用Webpack构建Vue(上一篇的翻译)准备 安装 npm, vue, webpack, node.js,安装方法见 Ubuntu, Mac 下...
  • 5 Webpack loader

    2020-07-19 16:20:43
    例如,你可以使用 loader 告诉 webpack 如何加载 CSS 文件,或者如何将 TypeScript 转为 JavaScript。为此,首先安装相对应的 loader: npm install--save-dev css-loader npm install--save-dev ts-loader 然后...
  • webpack loader 的使用 webpack中css文件,字体文件的处理, file-loader url-loader webpack中css文件单独打包 MiniCssExtractPlugin 插件
  • webpack-image-rotate-loader 该加载器旋转图像。 支持JPEG,PNG,WebP,TIFF和RAW图像。 例子 安装 使用npm安装: npm install --save-dev webpack-image-rotate-loader 用纱安装: yarn add --dev webpack-...
  • 一个基于webpack-loader。 支持属性中的所有选项。 用法 安装 npm install properties-json-loader Webpack配置 使用属性分析作为加载程序选项。 然后将返回解析后的属性json对象。 module . exports = { // ......
  • tmodjs-loader简洁的art-template loader1.首先安装包npm install tomdjs-loader2.在webpack配置文件的module中配置 module:{ loaders:[ ... {test:/\.tpl$/,loader:'tmodjs-loader'},//tpl...
  • webpack——loader

    2021-02-10 22:00:45
    webpack——loader 目录webpack——loader1. 什么是loader2. css 文件处理——css-loader 和 style-loaader3. less 文件处理——less-loader4. sass文件 同理5. 图片资源 ——url-laoder 和 file-loader6. ES6 转 ...
  • 1、新建文件夹 2、命令行输入 npm init npm i webpack vue vue-loader npm i css-loader style-loader vue-template-compiler src 源码
  • webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件也打包的话,就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 常见loader style-loader:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,306
精华内容 9,322
关键字:

loaderwebpack