webpack的學習感悟

標籤：config   等等   檔案目錄   require   plugin   項目   console   個數   cnp   

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的學習感悟