2019.07.24 13:35

webpack 4 + Vue Loader v15 升级报错

webpack 4 + Vue Loader v15 升级报错

deverror

buiderror

Vue Loader v15 使用了一个不一样的策略来推导语言块使用的 loader。

拿 <style lang="less"> 举例:在 v14 或更低版本中,它会尝试使用 less-loader 加载这个块,并在其后面隐式地链上 css-loader 和 vue-style-loader,这一切都使用内联的 loader 字符串。

在 v15 中,<style lang="less"> 会完成把它当作一个真实的 *.less 文件来加载。因此,为了这样处理它,你需要在你的主 webpack 配置中显式地提供一条规则:

{
  <span class="hljs-attribute">module</span>: {
    rules: [
      // ... 其它规则
      {
        test: /\.less$/,
        use: [
          <span class="hljs-string">'vue-style-loader'</span>,
          <span class="hljs-string">'css-loader'</span>,
          <span class="hljs-string">'less-loader'</span>
        ]
      }
    ]
  }
}

这样做的好处是这条规则同样应用在 JavaScript 里普通的 *.less 导入中,并且你可以为这些 loader 配置任何你想要的选项。在 v14 或更低版本中,如果你想为一个推导出来的 loader 定制选项,你不得不在 Vue Loader 自己的 loaders 选项中将它重复一遍。在 v15 中你再也没有必要这么做了。v15 也允许为 loader 使用非序列化的选项,这种选项在之前的版本中是无法使用的。

但是根据文档来 配置 还是报错 (看上面连个错误截图)所以 我们还是自行动手 webpack那么多坑 踩坑一时爽,一直踩坑一直爽
  • 升级后报错 如下信息
cross-env NODE_ENV=dev webpack-dev-server --mode development --progress --config build/webpack.dev.conf.js

 <span class="hljs-number">94</span>% after seal ERROR  Failed to compile with <span class="hljs-number">2</span> errors10:<span class="hljs-number">42</span>:<span class="hljs-number">23</span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 error  in ./src/components/page/game/article/Comment.vue?vue<span class="hljs-variable">&amp;type</span>=style<span class="hljs-variable">&amp;index</span>=<span class="hljs-number">0</span><span class="hljs-variable">&amp;lang</span>=less&amp;

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


exports = module.exports = require(<span class="hljs-string">"../../../../../node_modules/css-loader/lib/css-base.js"</span>)(false);
      ^
Unrecognised input
      in E:\jackieli\my-github\textnuxtapi\src\components\page\game\article\Comment.vue?vue<span class="hljs-variable">&amp;type</span>=style<span class="hljs-variable">&amp;index</span>=<span class="hljs-number">0</span><span class="hljs-variable">&amp;lang</span>=less&amp; (line <span class="hljs-number">1</span>, column <span class="hljs-number">8</span>)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/css-loader??ref-<span class="hljs-number">-8-1</span>!./node_modules/less-loader/dist/cjs.js??ref-<span class="hljs-number">-8-2</span>!./node_modules/vue-loader/lib??vue-loader-options!./src/components/page/game/article/Comment.vue?vue<span class="hljs-variable">&amp;type</span>=style<span class="hljs-variable">&amp;index</span>=<span class="hljs-number">0</span><span class="hljs-variable">&amp;lang</span>=less&amp; <span class="hljs-number">4</span>:<span class="hljs-number">14-436</span> <span class="hljs-number">14</span>:<span class="hljs-number">3-18</span>:<span class="hljs-number">5</span> <span class="hljs-number">15</span>:<span class="hljs-number">22-444</span>
 @ ./src/components/page/game/article/Comment.vue?vue<span class="hljs-variable">&amp;type</span>=style<span class="hljs-variable">&amp;index</span>=<span class="hljs-number">0</span><span class="hljs-variable">&amp;lang</span>=less&amp;
 @ ./src/components/page/game/article/Comment.vue
 @ ./src/router/index.js
 @ ./src/main.js

 error  in ./src/components/page/game/article/Index.vue?vue<span class="hljs-variable">&amp;type</span>=style<span class="hljs-variable">&amp;index</span>=<span class="hljs-number">0</span><span class="hljs-variable">&amp;lang</span>=less&amp;

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


exports = module.exports = require(<span class="hljs-string">"../../../../../node_modules/css-loader/lib/css-base.js"</span>)(false);
      ^
Unrecognised input
      in E:\jackieli\my-github\textnuxtapi\src\components\page\game\article\Index.vue?vue<span class="hljs-variable">&amp;type</span>=style<span class="hljs-variable">&amp;index</span>=<span class="hljs-number">0</span><span class="hljs-variable">&amp;lang</span>=less&amp; (line <span class="hljs-number">1</span>, column <span class="hljs-number">8</span>)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/less-loader/dist/cjs.js!./node_modules/css-loader??ref-<span class="hljs-number">-8-1</span>!./node_modules/less-loader/dist/cjs.js??ref-<span class="hljs-number">-8-2</span>!./node_modules/vue-loader/lib??vue-loader-options!./src/components/page/game/article/Index.vue?vue<span class="hljs-variable">&amp;type</span>=style<span class="hljs-variable">&amp;index</span>=<span class="hljs-number">0</span><span class="hljs-variable">&amp;lang</span>=less&amp; <span class="hljs-number">4</span>:<span class="hljs-number">14-434</span> <span class="hljs-number">14</span>:<span class="hljs-number">3-18</span>:<span class="hljs-number">5</span> <span class="hljs-number">15</span>:<span class="hljs-number">22-442</span>
 @ ./src/components/page/game/article/Index.vue?vue<span class="hljs-variable">&amp;type</span>=style<span class="hljs-variable">&amp;index</span>=<span class="hljs-number">0</span><span class="hljs-variable">&amp;lang</span>=less&amp;
 @ ./src/components/page/game/article/Index.vue
 @ ./src/router/index.js
 @ ./src/main.js

分析 报错 原因 是 在 vue组件中 引入了 样式

<span class="hljs-tag"><<span class="hljs-name">style</span>  <span class="hljs-attr">lang</span>=<span class="hljs-string">"less"</span> ></span>
 less 文件
<span class="hljs-tag"></<span class="hljs-name">style</span>></span>

这样的vue组件引入样式 并没有报错

<span class="hljs-tag"><<span class="hljs-name">style</span>></span>
  @<span class="hljs-keyword">import</span> <span class="hljs-string">'~@/css/comp.css'</span>
<span class="hljs-tag"></<span class="hljs-name">style</span>></span>
分析定位原始应该是loader 处理文件的时候 错误了

解决方法有两种

  • less 文件 用vue-style-loader 处理
  • less 文件用vue-loader 处理
<span class="hljs-regexp">//</span>webpack.base.conf.js
const vueLoaderConfig = require(<span class="hljs-string">'./vue-loader.conf'</span>)
module: {
rules:[
  {
        test: <span class="hljs-regexp">/\.vue$/</span>,
        loader: <span class="hljs-string">'vue-loader'</span>,
        options: vueLoaderConfig
      },
      <span class="hljs-regexp">//</span>way1
     <span class="hljs-regexp">//</span> 推荐使用这个 可用样式覆盖前面的样式 这个是vue-loader的超集 更加智能
      <span class="hljs-regexp">//</span> {
      <span class="hljs-regexp">//</span>   test: <span class="hljs-regexp">/\.less$/</span>,
      <span class="hljs-regexp">//</span>   use: [
      <span class="hljs-regexp">//</span>     <span class="hljs-string">'vue-style-loader'</span>,
      <span class="hljs-regexp">//</span>     <span class="hljs-regexp">//</span>Module build failed (from .<span class="hljs-regexp">/node_modules/</span>less-loader<span class="hljs-regexp">/dist/</span>cjs.js): 报错 屏蔽下面两个
      <span class="hljs-regexp">//</span>     <span class="hljs-regexp">//</span> <span class="hljs-string">'css-loader'</span>,
      <span class="hljs-regexp">//</span>     <span class="hljs-regexp">//</span> <span class="hljs-string">'less-loader'</span><span class="hljs-regexp">//</span>   ]
      <span class="hljs-regexp">//</span> },
      <span class="hljs-regexp">//</span>way2
      {
        test: <span class="hljs-regexp">/\.less$/</span>,
        loader: <span class="hljs-string">'vue-loader'</span>,
        options: vueLoaderConfig
      },
       {
        test: <span class="hljs-regexp">/\.scss$/</span>,
        loader: <span class="hljs-string">'vue-loader'</span>,
        options: vueLoaderConfig
      },
  ...
]
}

package.json 依赖

// 依赖版本
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-<span class="hljs-keyword">merge</span>-props<span class="hljs-string">": "</span>^<span class="hljs-number">2.0.3</span><span class="hljs-string">",
    "</span>babel-loader<span class="hljs-string">": "</span>^<span class="hljs-number">7.1.1</span><span class="hljs-string">",
    "</span>babel-<span class="hljs-keyword">plugin</span>-syntax-jsx<span class="hljs-string">": "</span>^<span class="hljs-number">6.18.0</span><span class="hljs-string">",
    "</span>babel-<span class="hljs-keyword">plugin</span>-transform-runtime<span class="hljs-string">": "</span>^<span class="hljs-number">6.22.0</span><span class="hljs-string">",
    "</span>babel-<span class="hljs-keyword">plugin</span>-transform-vue-jsx<span class="hljs-string">": "</span>^<span class="hljs-number">3.5.0</span><span class="hljs-string">",
    "</span>babel-preset-env<span class="hljs-string">": "</span>^<span class="hljs-number">1.3.2</span><span class="hljs-string">",
    "</span>babel-preset-stage<span class="hljs-number">-2</span><span class="hljs-string">": "</span>^<span class="hljs-number">6.22.0</span><span class="hljs-string">",
    "</span>vue-loader<span class="hljs-string">": "</span>^<span class="hljs-number">15.7.1</span><span class="hljs-string">",
    "</span>vue-<span class="hljs-keyword">style</span>-loader<span class="hljs-string">": "</span>^<span class="hljs-number">4.1.0</span><span class="hljs-string">",
    "</span>vue-<span class="hljs-keyword">template</span>-compiler<span class="hljs-string">": "</span>^<span class="hljs-number">2.5.2</span><span class="hljs-string">",
    "</span>webpack<span class="hljs-string">": "</span>^<span class="hljs-number">4.37.0</span><span class="hljs-string">",
    "</span>webpack-bundle-analyzer<span class="hljs-string">": "</span>^<span class="hljs-number">2.9.0</span><span class="hljs-string">",
    "</span>webpack-cli<span class="hljs-string">": "</span>^<span class="hljs-number">3.3.6</span><span class="hljs-string">",
    "</span>webpack-dev-<span class="hljs-keyword">server</span><span class="hljs-string">": "</span>^<span class="hljs-number">3.1.4</span><span class="hljs-string">",
    "</span>webpack-<span class="hljs-keyword">merge</span><span class="hljs-string">": "</span>^<span class="hljs-number">4.1.0</span><span class="hljs-string">"

"</span>scripts<span class="hljs-string">": {
    "</span>dev<span class="hljs-string">": "</span><span class="hljs-keyword">cross</span>-env NODE_ENV=dev webpack-dev-<span class="hljs-keyword">server</span> <span class="hljs-comment">--mode development --progress --config build/webpack.dev.conf.js","build": "cross-env NODE_ENV=production node build/build.js"</span>
  },
  • 参考上面的两种解决办法可以自行环境变量设置来使用不同的loader
<span class="hljs-regexp">/*自行解决*/</span>
<span class="hljs-keyword">function</span> fixWebpack4LessLoader(){
   <span class="hljs-keyword">if</span>(process.env.NODE_ENV === <span class="hljs-string">'dev'</span>){
     return   {
        test: <span class="hljs-regexp">/\.less$/</span>,
        use: [
          <span class="hljs-string">'vue-style-loader'</span>,
          <span class="hljs-regexp">//</span>Module build failed (from .<span class="hljs-regexp">/node_modules/</span>less-loader<span class="hljs-regexp">/dist/</span>cjs.js): 报错 屏蔽下面两个
        ]
       }
   }<span class="hljs-keyword">else</span>{
     return  {
        test: <span class="hljs-regexp">/\.less$/</span>,
        use: [
          <span class="hljs-string">'vue-style-loader'</span>,
          <span class="hljs-regexp">//</span>Module build failed (from .<span class="hljs-regexp">/node_modules/</span>less-loader<span class="hljs-regexp">/dist/</span>cjs.js): 报错 屏蔽下面两个

          <span class="hljs-regexp">//</span>npm run build 要开启下面两个不然报错 <span class="hljs-string">'css-loader'</span>,
          <span class="hljs-string">'less-loader'</span>
        ]
      }
   }
}

<span class="hljs-regexp">//</span> 然后在rules 中 插入这个函数 
  fixWebpack4LessLoader()
  • 你现在可以这样在xxx.vue组件中多种方式使用
<span class="hljs-tag"><<span class="hljs-name">style</span>></span>
  @<span class="hljs-keyword">import</span> <span class="hljs-string">'~@/css/comp.css'</span>
<span class="hljs-tag"></<span class="hljs-name">style</span>></span>

<span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"less"</span>></span>
body{
  div{
  border:1px solid red;
  }
}
<span class="hljs-tag"></<span class="hljs-name">style</span>></span>

还可以这样

<span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"less"</span>></span>
body{
  div{
   color:red;
}
}
<span class="hljs-tag"></<span class="hljs-name">style</span>></span>

DIY表情

(添加http或https协议)

提交评论

留言区 8