webpack 1 基礎配置教程

webpack

webpack簡單點來說就就是一個配置文件，所有的魔力都是在這一個文件中發生的。 這個配置文件主要分爲三大塊

• entry 入口文件 讓webpack用哪個文件作爲項目的入口

• output 出口 讓webpack把處理完成的文件放在哪裏

• module 模塊 要用什麼不同的模塊來處理各種類型的文件

---

• html plugin: html-webpack-plugin npm install html-webpack-plugin --save-dev

  var path = require('path');
  var HtmlwebpackPlugin = require('html-webpack-plugin');
  //定義了一些文件夾的路徑
  var ROOT_PATH = path.resolve(__dirname);
  var APP_PATH = path.resolve(ROOT_PATH, 'app');
  var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
  
  module.exports = {
  //項目的文件夾 可以直接用文件夾名稱 默認會找index.js 也可以確定是哪個文件名字
  entry: APP_PATH,
  //輸出的文件名 合併以後的js會命名爲bundle.js
  output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
  },
  //添加我們的插件 會自動生成一個html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]
  };

• webpack-dev-server: 當代碼更新的時候自動刷新瀏覽器。npm install webpack-dev-server --save-dev

  module.exports = {
  ....
  devServer: {
    host: '127.0.0.1',
    port: '8099',
    historyApiFallback: true
  },
  ...
  }

  package.json 裏面配置一下運行的命令,npm支持自定義一些命令

  "scripts": {
  "start": "webpack-dev-server --hot --inline"
  }

• 添加css樣式
  現在來添加一些樣式，webpack使用loader的方式來處理各種各樣的資源，比如說樣式文件，我們需要兩種loader，css-loader 和 style－loader，css-loader會遍歷css文件，找到所有的url(…)並且處理。style-loader會把所有的樣式插入到你頁面的一個style tag中。

  安裝loader npm install css-loader style-loader --save-dev

  webpack.config.js中添加loaders

  ...
  module: {
  loaders: [
    {
      test: /\.css$/,
      loaders: ['style-loader', 'css-loader'],
      include: APP_PATH
    }
  ]
  },
  ...

  看loaders的書寫方式，test裏面包含一個正則，包含需要匹配的文件，loaders是一個數組，包含要處理這些程序的loaders，這裏我們用了css和style，注意loaders的處理順序是從右到左的，這裏就是先運行css-loader然後是style-loader.

  sass-loader npm install sass-loader node=sass --save-dev

  webpack.config.js中添加loaders 刪除css處理，添加下面代碼

  ...
  module: {
  loaders: [
    {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader'],
      include: APP_PATH
    }
  ]
  },
  ...

• 處理圖片和其他靜態文件

  安裝loader，處理文件。諸如圖片，字體等等，不過有個神奇的地方它可以根據你的需求將一些圖片自動轉成base64編碼的，爲你減輕很多的網絡請求。

  url-loader npm install url-loader --save-dev

  配置config文件 (後面那個limit的參數，當你圖片大小小於這個限制的時候，會自動啓用base64編碼圖片)

  {
  test: /\.(png|jpg)$/,
  loader: 'url?limit=40000'
  }

• 添加ES6的支持

  裝各種loader npm install babel-loader babel-preset-es2015 --save-dev

  配置config文件

  ...
  {
  test: /\.jsx?$/,
  loader: 'babel',
  include: APP_PATH,
  query: {
    presets: ['es2015']
  }
  },
  ...