https://github.com/webpack/webpack webpack gethub地址。

http://webpack.github.io/ webpack 官網

前言

webpack作為現在比較火的前端框架，可以打包js、css、html、less、jade等文件，並且應用比較廣泛。甚至一些比較火的前端框架都在使用webpack打包工具，例如vue，react等等。本著互聯網的分享精神，我就將我自己的理解和想法分享給大家。

安裝

安裝之前如果會用cnpm的盡量用cnpm這樣會快一點，本案例默認電腦上沒有安裝cnpm鏡像。

1、設置全局webpack

npm install -g webpack

2、進入目標文件夾，本人使用文件目錄（E:\webpack-test）

cd E:\webpack-test

3、在項目中引導創建一個package.json文件

npm init （初始化過程就默認按回車就行了）

4、安裝webpack

npm install webpack --save-dev （ --save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），所以開發階段一般使用它） 安裝完成後會在項目目錄下出現node_module文件夾就證明安裝成功了

跟我一起使用

案例1

1、在項目目錄下新建一個test1.js文件 ，隨便寫一個函數。然後進行打包

function test(){
    console.log(‘1‘)
}

2、開始打包

在命令行內輸入webpack test1（文件入口） test-pack.js（打包完成名字）

3、打包完成

　　打包完成後命令行會返回幾個參數，1、Hash - 哈希值2、Version - webpack的版本、 Time：打包耗費時長。

　　另外還好返回一個列表Asset - 這次生成的文件、Size - 打包後的大小、Chunks - 這次打包的分塊、Chunk Name - 這次打包的塊名稱。

4、打開test-pack.js文件

我們發現，文件好像比沒有打包之前大了，因為webpack打包之前會生成一些需要的內置函數，在頁面的最下方可以看見我們打包的代碼。

webpack打包css文件

註意wenpack中在js文件內是可以引用css文件的。

1、新建一個css文件名稱叫做style.css

　　在裏面隨便寫一些css代碼。

2、在test.js文件中引用css

　　test.js全部代碼

require(‘./style.css‘)
function test() {
    console.log(‘1‘)
}

3、打包css 但是打包之前需要安裝css-loader、 和style-loader否則會報錯。

　　npm install css-loader style-loader --save-dev style-loader 是讓css生效，生效後的效果就是在html頁面的head標簽裏自動新建style標簽並插入代碼（這個以後的案例會講）、css-loader是讓打包軟件識別css並處理css文件。

4、運行打包命令

　　webpack test1.js test-pack.js - 但是還會報錯提示- You may need an appropriate loader to handle this file type 明明已經安裝了loader怎麽還報錯呢。

　　解決錯誤，根目錄也就是webpack-test 下新建wenpack.config.js文件寫入如下代碼。即可解決。錯誤原因是沒有指定loader。

var Webpack = require("webpack");
module.exports = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    }
}

　　或者引入css時候增加css-loader!,前綴即可

require(‘css-loader!./style.css‘);

5、打包完成

打包完成後我們看test-pack文件中又多出了好多webpack引入的一些代碼，在代碼的中間部分可以看見我們剛才寫的css，這說明我們的css已經引入成功了。

如何實現多文件打包

　　在一些單頁面應用中一般都會打包成一個文科，那例如像官網（舉例）那種也可以打包成為多頁應用。但是要如何配置呢。很簡單只需要配置webpack.config.js文件即可。

　　代碼如下，配置完成後 在命令行內輸入 webpack 就可以了，因為已經配置了webpack.config.js。就不用像上面案例那樣輸入很長一段語句了。

var path = require(‘path‘) //這裏是引入了node.js的path模塊，
module.exports = {
    entry: {
        main1:‘./src/script/main.js‘,    //如果這的value指定的是一個數組，那麽就相當於將兩個文件打包成一個文件。
        main2:‘./src/script/main2.js‘,
    }, //多文件入口文件配置  如果是單文件只需要寫一個.string路徑即可。
    output: {
        path: path.resolve(__dirname, ‘./dist/js‘), //打包後的文件的絕對路徑地址
        filename: ‘[name].js‘ //打包後的文件名稱[name]就像當月entry下的key（main1）還有hash、chunkhash等選項，但一般不怎麽用所以呢，就不只拿name舉例了。如果這裏不寫[]變量占位符而是一個普通的字符串的話打包文件會被覆蓋，最後只會留下最後打包那個文件。
    },
};

chunkhash使用後文件生成動態名稱，那麽script要怎麽引用呢。

　　在一些大型項目中需要上傳到服務器遠程倉庫，這時候chunkhash就非常有效，因為chunkhash是當文件修改後他才會發生改變，對代碼的控制性比較強。但是chunkhash改變後 script 的引用名稱也需要進行更改，這樣做是不是很麻煩呢，但是有一種方法可以解決。請看代碼。

　　1、安裝 npm install html-webpack-plugin --save-dev

var path = require(‘path‘);
var htmlWebpackPlugin = require(‘html-webpack-plugin‘); //引入模塊。

module.exports = {
    entry: {
        main1: ‘./src/script/main.js‘,
        main2: ‘./src/script/main2.js‘,
    }, //多文件入口文件配置  如果是單文件只需要寫一個.string路徑即可。
    output: {
        path: path.resolve(__dirname, ‘./dist/js‘), //打包後的文件地址
        filename: ‘[name]-[chunkhash].js‘ //打包後的文件名稱[name]就像當月entry下的key（main1）
    },
    plugins: [
        new htmlWebpackPlugin({
            template: ‘index.html‘  //指定模板文件，如果不指定的話會自動生成一個新建的index.html文件一起打包到path指定的打包地址。如果指定了的話，會將指定的模板打包後放入path指定的打包地址，然後自動使用script的 src引入entry下的所有文件
        })
    ]
};

webpack的學習感悟