一小時入門webpack

webpack如今已經成爲了大衆化的項目必要腳手架，基本上如今的不少項目都須要webpack，因爲webpack的出現glup和grunt已經完敗，今天咱們來講一下webpack如何使用。

首先咱們須要包依賴，npm init初始化package.json,咱們只須要把咱們須要的東西引入就能夠了，代碼以下：

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "test": "",
    "build": "webpack -p",
    "dev": "webpack -w"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-runtime": "^6.20.0",
    "crypto": "*",
    "happypack": "^3.0.2",
    "css-loader": "^0.23.1",
    "es6-promise": "*",
    "extract-text-webpack-plugin": "^1.0.1",
    "fetch-polyfill": "^6.13.0",
    "file-loader": "^0.9.0",
    "node-sass": "^3.13.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue": "^2.0.5",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-awesome-swiper": "*",
    "vue-loader": "^8.5.4",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2",
    "webpack-merge": "^0.14.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.20.0",
    "fetch-polyfill": "^0.8.2",
    "vue-lazyload": "^1.0.0-rc7"
  }
}

scripts下面是命名npm運行,只要咱們npm run build就會執行webpack -w
devDependencise 裏面是全部的開發環境依賴包
deoendencies 裏面是全部的生產環境的依賴包
也就是咱們開發須要的東西都依賴在dev下，這樣咱們在電腦上執行npm install就會把全部的dev依賴所有安裝下來
咱們配置的相面的npm以後咱們就能夠配置webpack的config了
咱們新建一個webpack.config.js代碼以下

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry:{
        home:'./source/javascript/home.config.js'
    },
    output:{
        path:'dist/',
        filename:'[name].js'
    },
    module:{
        loaders:[
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style','css!sass')
            },
            {
                test: /\.es6$/,
                loader: "babel-loader",
                    query:{
                        presets:['es2015']
                    }
            },
            {test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?-autoprefixer")},
            { test: /\.vue$/, loader: 'vue'}
        ]
    },
    plugins:[
        new ExtractTextPlugin("[name].css"),
    ]
};

當咱們運行npm run dev的時候，就會執行到這個文件

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

第一行代碼爲了把webpack引入到當前文件中，webpack咱們以前npm install的時候已經加載到node_modules中

第二行代碼是爲了打包css文件，編譯sass，acss，less等，他還有一個更好的優勢就是postcss處理自動添加適應不一樣css瀏覽器的前綴。

以後咱們只須要開始寫webpack的配置：

module.exports = {
    entry:{//項目入口，文件從這裏進入
        home:'./source/javascript/home.config.js'
    },
    output:{//項目出口，壓縮到這個目錄下
        path:'dist/',
        filename:'[name].js'
    },
    module:{//添加一些咱們須要依賴的loaders，注意：全部咱們須要的依賴都須要寫在package.json中而後install進入到項目裏面
        loaders:[
            {//將scss編譯成css壓縮文件
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style','css!sass')
            },
            {//將全部的es6語法編譯成es5語法，注意：這裏babel的配置能夠卸載query中，可是仍是推薦本身新建一個.babelrc來配置
                test: /\.es6$/,
                loader: "babel-loader",
                    query:{
                        presets:['es2015']
                    }
            },
            {test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader?-autoprefixer")},
            { test: /\.vue$/, loader: 'vue'}//編譯vue
        ]
    },
    plugins:[//引入須要的組件，例如咱們react項目，咱們須要阿里開發的ant樣式庫，咱們須要install到項目中，以後配置到webpack這個位置
        new ExtractTextPlugin("[name].css"),
    ]
};

babelrc配置：

{
  "presets": ["es2015", "stage-0", "react"]

}

es2015:表示轉移es6語法

stage-0:表示es7語法天的轉碼規則一共有四個階段（推薦使用2，雖然沒有太大區別）

固然咱們可能有的項目也會須要用到eslint，他和babel是相似的也是須要一個.eslintrc文件

{
  "plugins": [
    "babel"
  ],
  "rules": {
    "arrow-parens": 0,
    "babel/arrow-parens": 2,
    "no-console": 0,
    "no-const-assign": 2
  }
}

當你把全部都配置好以後，咱們只須要運行npm run dev命令，咱們就會吧本身的js，vue壓縮到對應的dist目錄中，咱們在頁面只須要引入dist中js和css就實現了資源壓縮的目的