配置webpack3.6.0处理css、less、es六、图片文件、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，babel-core、babel-preset-es2015

配置：

{
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

 

 

接下来是对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"
  }
}

 webpack.config.js中处理各类上述文件全部的配置为：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  },
  resolve:{
    alias:{
      "vue$":"vue/dist/vue.esm.js"
    }
  }
}

package.json中的全部的依赖：

{
  "name": "fhg",
  "version": "1.0.0",
  "description": "need not description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^1.0.1",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.1.0",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "vue": "^2.6.10"
  }
}

 

你们能够进群交流学习，老师讲的十分仔细！

 

vue学习连接

https://www.bilibili.com/video/av59594689/?p=86