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