經過閱讀本文你能夠解決如下幾個問題：
- 對腳本的處理
- JS用什麼loader來加載？
- 官方文檔上的例子entry只有一個js，咱們有多個怎麼辦
- output裏要分文件夾存放目標文件，怎麼設置？
- jQuery引入方法？
- 想提取出程序裏的公共模塊應該怎麼處理？
2. 對樣式的處理
- 樣式用什麼loader？
- webpack打包的css怎麼獨立成單獨的文件
接下來咱們就在實際操做中解決這些問題，項目的開發目錄構架請參考以前文章，我是在已完成以前工做的狀況下進行操做的，若是有本身的項目，能夠經過閱讀本文中的方法來作參考。在開發以前咱們如今sublime安裝一個插件，fileheader，這個插件的做用是在開始以前加一些說明，好比建立時間做者之類的。如今讓咱們開始。
首先對webpack的配置文件進行改形成
[code]
var config = {
entry: ‘./src/page/index/index.js’,
output: {
path: ‘./dist’,
filename: ‘app.js’
}
};
module.exports = config;
[/code]
- js用什麼來加載
官方提供了兩種方法，一是webpack自己就能夠支持js加載，另外一種是Babel來加載再用polifile來作兼容性適配，可是第二種方法不能兼容IE8，因此這裏咱們採用webpack自己對js的加載器，即咱們並不須要安裝js的loader。
- js的多入口處理方法
將entry目前是個字符串，咱們將其修改爲一個對象，地址是一個數組的方式來解決這個問題，這在webpack中是支持的。
[code]
entry: {
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
[/code]
而後在page裏面創建一個login裏面包含一個index.js，
用一個標記性的字符串
來測試剛纔的結果。
[code]
console.log(‘hello login’);
[/code]
一樣，把以前的index文件夾下的indes.js也改掉
[code]
console.log(‘hello index’);
[/code]
以前的cats.js以後不會用了能夠刪除了。
使用webpack看到打包成功打包完成後進入app.js看到了hello login，可是沒有看到hello index，說明index沒有進來，
這個的緣由是在webpack.config.js文件中雖然有了兩個entry可是output只有一個，這就出現了第三個問題。
- 如何配置輸出文件？
進入app.js將output改成
[code]
output: {
path: ‘./dist’,
filename: ‘[name].js’
}
[/code]
[name]是filename裏支持的一個方法，能夠按照源文件名字打包。
能夠看到dist文件夾裏已經有咱們想要的文件了
可是咱們看到app.js還在這裏，而咱們的配置文件中如今並無這項以前的配置了，這是webpack的一個問題，webpack在配置的時候不會清除掉以前打包的文件。所以須要把dist文件夾刪了從新打包。實現了效果以後咱們注意到了一個問題，咱們在開發中是但願不一樣類型的文件在不一樣的文件夾下，接下來咱們說說這一點要怎麼作到。
- 分文件夾存放目標文件
在filename中是支持路徑的所以咱們修改配置加上路徑。
[code]
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
}
[/code]
再執行webpack 咱們看到以前的兩個文件已經去到了dist下的js文件夾，完成了不一樣類型文件放置於不一樣文件夾的功能，這就是咱們想要的。
- jQuery該如何引用
首先在view下創建一個測試用的index.html頁面引入js
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22..%2F..%2Fdist%2Fjs%2Findex.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
[/html]
進入瀏覽器打開調試工具看到hello index，說明腳本已經引入進來了。
若是沒有安裝jQuery就安裝一下
[code]
npm install jquery –save
[/code]
如今使用一下jquery，page/index/index.js修改成
[code]
var $ = require(‘jquery’);
$(‘body’).html(‘HELLO INDEX’);
console.log(‘hello index’);
[/code]
webpack一下打開瀏覽器，刷新剛纔的文件，能夠看到HELLO INDEX就出來了，這就說明如今咱們已經引入了jquery。可是還有兩個問題待解決，1.若是以這種方式引入，那麼每一個文件的前面都須要引入。2.有的jquery插件依賴的是全局的jquery對象，而以變量形式加載的jquery是沒有辦法放在插件裏使用的。接下來咱們開始解決這兩個問題。
另外一種方式是直接在腳本下面引入jquery CDN，能夠在這裏找www.bootcdn.cn/jquery/,這裏我建議選擇2.0如下的版本，由於2.0以上的版本對IE8不支持，這樣就是一個全局的jquery了。另外說明一下，用」//」的形式來加載靜態資源，表示的是省略請求方式，若是在http或https下會自動補全成http://…或https://…，因爲咱們要加載外部的資源而且是使用文件的形式查看的因此咱們要用全路徑。在page -> view -> index.html中加上：
[javascript]
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
[/javascript]
接下來進行測試，在page -> index -> index.js引用jquery，即:
[code]
$(‘body’).html(‘HELLO INDEX~~~’);
console.log(‘hello index’);
[/code]
執行webpack，後打開瀏覽器看到執行成功！那麼如何使用模塊化的方式該如何引用jquery呢？
首先在webpack.config.js中加上external字段
[code]
var config = {
entry: {
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
}
};
module.exports = config;
[/code]
在index->index.js中修改
[code]
</pre>
var $$ = require(‘jquery’);
$$(‘body’).html(‘HELLO INDEX~~~’);
console.log(‘hello index’);
[/code]
刷新頁面咱們發現剛纔的HELLO INDEX~~~~~仍是生效的。
- 如何建立公共模塊？
CommonsChunkPlugin使咱們須要用到的模塊，進入它的github看到官方用法說明。咱們複製一下new語句添加到配置文件中，如今作到這一步配置文件的完整代碼是：
[code]
var webpack = require(‘webpack’);
var config = {
entry: {
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name : ‘commons’,
filename : ‘js/base.js’
})
]
};
module.exports = config;
[/code]
以後咱們webpack一下，看到base.js已經進到dist中了，接下來咱們來測試一下效果，在page中新建一個module.js
[code]
module.exports = {
test:1234
}
[/code]
再page -> index -> index.js 改成
[code]
require(‘../module.js’);
[/code]
再page -> login -> index.js 改成
[code]
require(‘../module.js’);
[/code]
webpack一下後進入base.js，這是咱們剛纔設定的通用模塊的放置位置。進入後看到已經這個通用的組建進來了。
- 全局模塊處理通用邏輯
接下來咱們還須要一個全局的模塊來處理一些通用的邏輯，好比說全局樣式的引入和一些全局的處理、統計之類的。全局模塊最簡單的方法是在每一個頁面都引用一下，可是這樣會很麻煩，每一個頁面都要多引用一個東西。
在page中新建的common文件夾，其下建立一個common.js。
[code]
console.log(‘i am global’);
[/code]
修改配置文件在entry下添加common在plugins下添加name:’common’：
[code]
&nbsp;
var webpack = require(‘webpack’);
var config = {
entry: {
‘common’: [‘./src/page/common/index.js’],
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name : ‘common’,
filename : ‘js/base.js’
})
]
};
module.exports = config;
[/code]
執行webpack後看到dist下的base.js中’i am global’已經被加載進來了。到這裏咱們通用模塊的配置就已經完成了。這種方法即優化了加載速度又可以提供全局的模塊還免去了在每一個頁面中的require。這樣webpack對腳本處理的問題就所有解決了。
接下來咱們看看webpack對樣式的處理還有什麼問題？
- 處理樣式使用什麼loader？
首先新建一個樣式文件page -> index -> index.css
[code]
body{
background: #ccc;
}
[/code]
在page -> index -> index.js 引入剛纔寫的樣式
[code]
require(‘./index.css’);
require(‘../module.js’);
[/code]
在webpack.config.js中加上module：
[code]
&nbsp;
var webpack = require(‘webpack’);
var config = {
entry: {
‘common’: [‘./src/page/common/index.js’],
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name : ‘common’,
filename : ‘js/base.js’
})
]
};
module.exports = config;
[/code]
能夠看到咱們將在module中使用的是style loader和css loader，!鏈接兩個loader，這個的意思是作兩個loader的串聯，執行順序是從右往左，即會先執行css loader而後再用執行的結果執行style loader。接下來咱們安裝這兩個loader並檢查一下安裝結果，注意開發工具的安裝在後面加上–dev，在terminal中輸入
[code]
npm install css-loader style-loader –save-dev
ls
cat package.json
[/code]
咱們能夠看到css和style loader都以安裝好了。執行一下webpack，看到執行成功。
接下來咱們看一下css被打包到了哪裏。
dist -> js -> index.js
看到css被當成了一個字符串放在js中來處理，這樣雖然可以將css作模塊化，但另外一問題是，咱們這裏使用js來加載的css須要等待js加載完畢後纔可以加載進來，這樣會致使在加載的時候可能會出現一段空白樣式的時間，這是不太可以接受的。所以咱們想辦法將它放到一個單獨的css文件中，使用link的形式來加載。這裏咱們將使用extract-text-webpack-plugin插件來解決這個問題，首先咱們須要進行插件的安裝，網上一些教程使用的是
[code]
<pre class="hljs undefined"><code>npm install extract-text-webpack-plugin –save-dev</code></pre>
[/code]
執行後能夠看到報錯了
這是由於在npm 3以上的版本再也不自動尋找依賴而是須要咱們本身找到合適的包，對於咱們來講該如何去找這麼多的插件和loader呢？咱們進入這個插件的github中看一下版本歷史。
咱們這裏選擇v1.0.1,看到安裝成功了咱們修改一下配置文件：
[code]
var webpack = require(‘webpack’);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var config = {
entry: {
‘common’: [‘./src/page/common/index.js’],
‘index’ : [‘./src/page/index/index.js’],
‘login’ : [‘./src/page/login/index.js’],
},
output: {
path: ‘./dist’,
filename: ‘js/[name].js’
},
externals : {
‘jquery’ : ‘window.jQuery’
},
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") }
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name : ‘common’,
filename : ‘js/base.js’
}),
new ExtractTextPlugin("css/[name].css"),
]
};
module.exports = config;
[/code]
再執行webpack，看到dist下面已經有了剛纔配置的css文件夾，剛纔的background已經被打包進來了。在js中也搜索不到background了，說明已經打包成功了。
在view -> index.html下應用一下css看一下效果，須要更改一下代碼來引入
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../dist/css/index.css">
<title></title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="../../dist/js/base.js"></script>
<script type="text/javascript" src="../../dist/js/index.js"></script>
</body>
</html>
[/html]
若是用的sublime的話，右鍵空白區域，open in browser打開瀏覽器看到背景已經變成灰色了，ctrl+i能夠看到i am global也進來了