webpack的學習過程

公司裏的項目，都用webpack了，上週忙於完成業務邏輯的實現，對webpack只是有個大概的印象。這周終於有時間來好好學習總結一番了。

通常狀況下學習新的東西，我喜歡去知乎去了解這個技術是用來作什麼的、爲什麼項目裏須要用這個技術，而後再去官網學習。不過對於webpack，知乎和官網上都看的一頭霧水。

下面的3個連接，算是我找到的比較好的入門文章了。跟着教程敲了幾遍代碼，今天就把知識點串一下吧，也加深一下本身對webpack的理解。

1. what is Webpack?
   首先呢，Webpack是開發用的工具。好比Sass, less等css預處理器，好比ES6語法，咱們經過Webpack進行設置後，能夠用Sass/less寫css，能夠直接寫ES6語法，而不用管瀏覽器如何識別——webpack都幫咱們作了。
   
   上面算是我對Webpack的第一層理解，在此基礎上，去看Webpack的相關文章，至少不會一頭霧水吧。
   Webpack is a module bundler: A tool that can analyze your project's structure, find JavaScript modules and other assets to bundle and pack them for the browser.
   翻譯：webpack是模塊打包機，它能夠分析你的項目結構，找到JS模塊以及其餘一些瀏覽器不能直接運行的部分並進行轉化，以便在瀏覽器裏能夠使用。
   用戶瀏覽器發起請求，最終獲得的只是html, css, js。可是咱們在開發的時候，爲了有效迭代和方便維護，漸漸的變成了模塊化開發，有了npm來幫咱們管理modules，有了vue, anjular.js等幫咱們組件化開發，有了sass/less讓咱們更好的寫css，而webpack呢？將咱們用npm + vue + es6等寫的代碼，打包爲瀏覽器可識別的JS文件（bundle.js）
   
   
2. Configuring Webpack

//Webpack配置
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: __dirname + "/app/main.js",//惟一入口文件
  output: {
    path: __dirname + "/build",
    filename: "[name]-[hash].js"//打包後的js文件
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
      }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("[name]-[hash].css")
  ]
} 

 

參考連接

http://www.pro-react.com/materials/appendixA/

https://fakefish.github.io/react-webpack-cookbook/Introduction-to-Webpack.html

https://www.zfanw.com/blog/webpack-tutorial.html#i-2