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