经过阅读本文你能够解决如下几个问题：
- 对脚本的处理
- 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也进来了