webpack學習筆記(1)

webpack概念-代碼打包工具，給定一個入口文件，找到這個文件所依賴的模塊和這個依賴模塊所依賴的模塊，用loaders來處理這些模塊，使得瀏覽器可以識別這些模塊的語法。

為什么要使用webpack

隨著用戶界面的復雜度提升，前端的業務邏輯也變得多和復雜，為了提高開發效率，出現了許多的解決方案。

• sass less stylus這類的提高css代碼復用的預處理器
• ES6的新特性語法
• 前端的MVVM框架的模塊化開發
• ......

運用了這些開發效率確實有所提升，但是也出現新的麻煩事，那就是代碼的解析，像sass less這些css語法、ES6的新特性，瀏覽器都不能解析運行，我們還要手動去把sass、less等轉成css語法，把ES6語法轉成ES5語法。這實在是麻煩。使用webpack就能夠實現自動打包。當然，webpack做的還不只是打包，使用webpack插件，還能實現熱更新、代理服務、代碼壓縮，刪除代碼的重復引用部分等。通過webpack打包實現代碼的異步加載，也提升了代碼的運行效率。

webpack的幾個部分

entry--文件入口

entry的幾種寫法

     module.exports = {
         //入口文件 打包的入口 入口可以多個
         entry:'index.js' //路徑
     }

     module.exports = {
         entry: ['index.js','index2.js']
     }

    module.exports = {
        entry:{
            index: 'index.js'
        }
    }

output--文件出口,打包生成的文件的描述(bundle),當有多個entry時，這樣寫，打包出來后，fileName將會根據entry的名字不同而不同。

    module.exports = {
        entry:{
            index: 'index.js',
            index2: 'index2.js'
        },
        output:{
            filenName : '[name].main.[hash:5].js'
        }
    }

loader--解析 css less es6等,不僅僅是js了

    module.exports ={
        module:{
            rules:[
                {
                    test: /\.css$/,
                    use: 'css-loader'
                }
            ]
        }
    }

plugins--應用插件可以處理代碼（壓縮代碼 提取變量 混淆代碼）

    const webpack = require('webpack')
    module.exports ={
        plugins: {
            new webpack.optimize.UglifyJsplugin()
        }
    }