webpack學(xué)習(xí)筆記(1)

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

為什么要使用webpack

隨著用戶界面的復(fù)雜度提升，前端的業(yè)務(wù)邏輯也變得多和復(fù)雜，為了提高開發(fā)效率，出現(xiàn)了許多的解決方案。

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

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

webpack的幾個(gè)部分

entry--文件入口

entry的幾種寫法

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

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

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

output--文件出口,打包生成的文件的描述(bundle),當(dāng)有多個(gè)entry時(shí)，這樣寫，打包出來后，fileName將會(huì)根據(jù)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--應(yīng)用插件可以處理代碼（壓縮代碼 提取變量 混淆代碼）

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