配置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，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