配置webpack3.6.0处理css、less、es6、图片文件、vue

首先配置webpack的基本配置，包括entry( 入口)、output（出口）：

（创建webpack.config.js文件放置所有的webpack的配置）

接下来是配置命令：

  module.exports={

entry:"",

output:{

    path:"",(写绝对路径，打包后的输出文件，一般通过node的path以及path.resolve的拼接函数，进行动态获取)

    filename:""

}

}

然后提到的是如何将npm run XXX命令与webpack命令形成映射？

在package.json文件中的script下对应添加

"scripts":{

    “build”:"webpack",

}

类似的代码就行了

下面是webpack如何对css文件进行处理？

（webpack的扩展处理都是通过安装对应的loader进行的）

处理css需要的loader为：css-loader、style-loader

利用npm进行下载上述loader

安装完，便进行配置，处理css需要的webpack配置为：

在module下添加相应的rules

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
              (从右向左依次编译，所以顺序可不能乱放)
      }
    ]
  }

所有你所需要的loader以及配置都可以在这里找到：https://www.webpackjs.com/loaders/css-loader/#%E7%94%A8%E6%B3%95

接下来是对less文件的处理

处理less需要的loader为：less-loader、less

配置：略

接下来是对图片文件的处理

处理图片文件需要的loader为：url-loader、file-loader

当文件的大小小于默认配置option中的8196：=8kb时，图片文件会被url-loader编译成为base64存储，大于默认大小limit，便通过file-loader处理，不会编译成为base64存储，而是直接通过hash算法更改文件名，存储到出口文件。

配置：略

接下来是对es6文件的处理

处理less需要的loader为：babel-loader

配置：略

接下来是对vue文件的处理

 需要在webpack中集成vue.js

利用npm安装npm i vue --save

vue在构建发布版本的时候，发布两个版本

1.runtime-only   代码中不可以有任何Template

2.runtime-compiler  代码中可以有Template

可以在webpack配置文件中，配置成为版本runtime-compiler 

resolve:{
  alias:{
    "vue$":"vue/dist/vue.esm.js"
  }
}