步步向前之webpack

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

常见用法

module 的 loader 属性 与 use 属性联系

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

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

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

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

1. 直接写loader
   module.exports={

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

   }

2. 使用use，字符串形式

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

3. 使用use，对象形式

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

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

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

5. 行内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 。