摘要：目錄第課安裝和第課配置文件第課做為的一個模塊來使用第課插件篇第課模塊篇第課在開發中使用本文參考文檔官方模塊配置模塊配置中文翻譯模塊配置中文翻譯版本官方內置清單第三方清單代碼托管及用法配置官方文檔模塊總覽我是首頁萬事開頭

webpack目錄

第1課: 安裝webpack和webpack-dev-server

第2課: 配置文件

第3課: 做為node的一個模塊來使用

第4課: 插件篇

第5課: 模塊篇

第6課: 在Vue開發中使用webpack

本文參考文檔

官方模塊配置???模塊配置中文翻譯???模塊配置中文翻譯(版本2)

官方內置loader清單???第三方loader清單

eslint-loader代碼托管及用法?????eslint配置官方文檔

模塊總覽

babel-loader

vue-loader

url-loader+file-loader

html-loader

postcss-loader + css-loader + style-loader

console.log("我是首頁");
document.write("萬事開頭難")
const AA = {
    name:"張學友",
    city: "香港"
}
const BB = {
    ...AA,
    age:40,
    song:"吻別"
}
document.write(BB.name)

必裝loader_1: babel安裝和配置

官方網站: http://babeljs.io/
代碼托管: https://github.com/babel/babel
babel-loader參考: https://webpack.js.org/loader...
babel講解參考阮一峰老師文章: http://www.ruanyifeng.com/blo...

A: 安裝 01：安裝babel核心

babel核心是必裝，如果在命令行下工作，還得安裝babel-cli，babel-loader其實是就調用的它
cnpm i babel-core -D

02：安裝babel-loader

babel-loader是webpack中的一個專為babel寫的加載器
cnpm i babel-loader -D

03：安裝babel預置

babel有很多預置，不同的預置有不同的功能，在https://github.com/babel/babel/tree/master/packages中可以看到，有很多預置(以babel-preset-開頭的)
對于es2015,es2016,es2017,env,stage-0,stage-1,stage-2,stage-3的理解，可參考https://www.cnblogs.com/chris...，為了方便，我使用env和stage-0，它包括其它幾個stage
cnpm i babel-preset-env babel-preset-stage-0 -D

04：安裝babel插件

比如我想用對象的rest屬性和spread屬性，如下例子

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

得安裝插件transform-object-rest-spread http://babeljs.io/docs/plugins/transform-object-rest-spread/
cnpm i babel-plugin-transform-object-rest-spread -D

B: 配置

主要是將上面安裝的預置和插件放到配置文件中
方式一: 多帶帶的.babelrc文件或.babelrc.js

{
    "presets": [ "env", "stage-0"],
    "plugins": [ "transform-object-rest-spread"]
}

方式二：在項目的package.json中

{
  "name": "webpack2017",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "abc": "webpack --config ./build/webpackfile.js",
    "kkkk": "webpack-dev-server --config ./build/webpackfile.js --hot",
    "tttt": "node build/build.js",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "webpack": "^3.10.0"
  },
  "babel" :{
    "presets": [ "env", "stage-0"],
    "plugins": [ "transform-object-rest-spread"]
  }
}

vue-loader

因我是用vue開發的，不是react來開發應用的，所以這里只講vue，在https://webpack.js.org/loader...，vue-loader是第三方加載器，第三方加載器全部入在
https://github.com/webpack-co...，這個加載器是由vue官方維護，地址是:https://github.com/vuejs/vue-...

文檔 :https://vue-loader.vuejs.org/...
代碼托管: https://github.com/vuejs/vue-...
說明1：vue-loader是為vue服務的，前提是你安裝了vue

1.安裝 url-loader

作用: 對將圖片|視頻音頻|字體進行base64編碼，它有一個參數limit來決定是否要將文件進行base64編碼，當不用編碼時，就調用file-loader進行后續處理
在js文件中直接使用圖片

//下面代碼放在 D: