步步向前之webpack

luffyZh 发布于2019-08-26 10:24 / 3241人阅读

摘要：最近准备系统地学习，这篇文章将持续更新，记录自己在使用中遇到的问题踩过的坑等，小白的错误不入法眼，掠过就好。字符串形式对象形式行内写法多个之间用分割。

最近准备系统地学习webpack，这篇文章将持续更新，记录自己在使用webpack中遇到的问题、踩过的坑等，小白的错误不入法眼，掠过就好。

常见用法 module 的 loader 属性与 use 属性联系

查阅后，有说 webpack最新版的loader规则里，不在是loader属性了，取而代之的是 use属性，也有说 loader 是 use 的简写，我这边不太确定，大佬们也可以评论区指教一下，我试了试，在 webpack4 以上的版本里做了如下操作：

      //...
     {
        test: /.vue$/,
        // use: ["vue-loader"]
        loader: ["vue-loader"]
      },
      //...

我所在项目工程暂未受到影响，所以我个人觉得简写的可能性大点，但也不排除第一种说法 webpack 对写法做了兼容，新版本的文档都是采用 use, 所以大家采用 use 就好。

查阅资料得出了 loader的不同写法__作者：花样前端__掘金

直接写loader
module.exports={

module:{
    rules:[
        {
            test: /.js$/,
            loader: "my-loader",
            exclude: /node_modules/
        },
    ]
}

}

使用use，字符串形式

module.exports={
    module:{
        rules[
             {
                test: /.js$/,
                use: "my-loader",//直接传递字符串
                exclude: /node_modules/
            },
        ]
    }
}

使用use，对象形式

module.exports={
    module:{
        rules[
             {
                test: /.js$/,
                use: {  //对象形式，可以给loader传递参数
                    loader:"my-loader",
                    options:{}//这里传递参数给loader
                }
                exclude: /node_modules/
            },
        ]
    }
}

使用use，数组形式
数组内的每一项可以为字符串，也可以是对象。

module.exports = {
    module: {
        rules: [
            {
                test: /.js$/,
                use: [
                    "my-loader1",//字符串形式
                    { loader: "my-loader2", options: {} }//对象形式
                ],
                exclude: /node_modules/
            },
        ]
    }
}

行内loader写法：
多个loader之间用!分割。

let something=require("loader2!loader1!./profile.js")

复制代码行内loader可添加前缀，代表当前文件是否交由其他loader处理:

-! 表示不会让文件再去通过 pre+normal loader处理了
! 表示不会让normal loader处理了
!! 该文件只会让行内loader处理

let a = require("inline-loader!./a") // !分割，inline-loader就是行内loader
let a = require("-!inline-loader!./a") // -!表示不会让文件再去通过 pre+normal loader处理了
let a = require("!inline-loader!./a") // !  表示不会让normal loader处理了
let a = require("!!inline-loader!./a") // !! 该文件只会让行内loader处理

复制代码命令行写法：

webpack --module-bind jade-loader --module-bind "css=style-loader!css-loader"

报错信息 报错: npm ERR! also called "webpack". Did you name your project the samenpm ERR!

这个就很尴尬了，我建立工程随手创建了一个名为webpack的文件夹，并执行了npm init -y(按默认选项初始化)，得到package.json文件：

然后可以继续执行npm install webpack webpack-cli --save-dev 。

GPU云服务器云服务器 linux 向前查找步步撤销一步步搭建框架步步高vivo手机

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106129.html

步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

Imfan 2019-08-02 11:51 评论0 收藏0
步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

ZoomQuiet 2019-08-29 17:08 评论0 收藏0
vue单页应用之创建和运行

摘要：首先要开始单页应用开发，肯定是要知道如何运行，如何创建单页，这里将一步步带你入的坑。。。首先要开始vue单页应用开发，肯定是要知道如何运行，如何创建单页，这里将一步步带你入vue的坑。。。 1.安装node 安装node并不是叫你学习node,而是我们需要node里面npm所有才去安装，进入node官网的下载页http://nodejs.cn/download/下...，安装完毕之后...

Near_Li 2019-08-01 17:29 评论0 收藏0
vue单页应用之创建和运行

摘要：首先要开始单页应用开发，肯定是要知道如何运行，如何创建单页，这里将一步步带你入的坑。。。首先要开始vue单页应用开发，肯定是要知道如何运行，如何创建单页，这里将一步步带你入vue的坑。。。 1.安装node 安装node并不是叫你学习node,而是我们需要node里面npm所有才去安装，进入node官网的下载页http://nodejs.cn/download/下...，安装完毕之后...

DTeam 2019-08-20 18:55 评论0 收藏0