Webpack 入门指迷 – 热前端Webpack是什么
首先可以看下，文档是最好的老师。 也有国外的一个朋友写的入门介绍。
Webpack是由Tobias Koppers开发的一个开源前端模块构建工具。它的基本功能是将以模块格式书写的多个JavaScript文件打包成一个文件，同时支持CommonJS和AMD格式。但让它与众不同的是，它提供了强大的loader API来定义对不同文件格式的预处理逻辑，从而让我们可以将CSS、模板，甚至是自定义的文件格式当做JavaScript模块来使用。Webpack 基于loader还可以实现大量高级功能，比如自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换等等，可以说是目前前端构建领域最有竞争力的解决方案之一。
为什么使用Webpack
他类似browserify 但是可以把你的应用分离成许多文件，如果你有许多页面在你的单页应用里面，用户只需要下载当前页面所需要的代码。如果你跳转到另一个页面，他们不需要重新加载通用的代码。
他能替代grunt或者gulp大部分的功能 因为他可以构建和打包CSS，预处理CSS，编译JS和打包处理图片，甚至更多事情。
他支持AMD和CommonJs以及其他的模块化系统（Angular，ES6）。如果你不知道用什么，那么可以用CommonJs。
怎么安装Webpack
安装node.js
首先需要安装，node自带了包管理工具npm。
安装webpack
使用npm install webpack -g，webpack全局安装到了本地环境中，就可以使用webpack命令了。
在项目中使用webpack
通过npm init实例化package.json文件。
通过npm install webpack --save-dev安装webpack到package.json文件中。
或者通过npm install webpack@1.2.x --save-dev安装指定版本的webpack到package.json文件中。
通过npm install webpack-dev-server --save-dev安装dev tools到package.json文件中，本地运行webpack服务。
怎么使用Webpack
1、安装webpack后，可以使用webpack这个命令行工具。主要命令：webpack &entry& &output&。可以切换到包含webpack.config.js的目录运行命令：
webpack 执行一次开发时的编译
webpack -p 执行一次生成环境的编译（压缩）
webpack --watch 在开发时持续监控增量编译（很快）
webpack -d 让他生成SourceMaps
webpack --progress 显示编译进度
webpack --colors 显示静态资源的颜色
webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by 将modules/chunks/assets进行列表排序
webpack --display-chunks 展示编译后的分块
webpack --display-reasons 显示更多引用模块原因
webapck --display-error-details 显示更多报错信息
2、每个项目下都必须配置有一个 webpack.config.js，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
下面看一个简单的示例：
var webpack = require('webpack');
module.exports = {
plugins: [
//提公用js到common.js文件中
new monsChunkPlugin('common.js'),
//将样式统一发布到style.css中
new ExtractTextPlugin(&style.css&, {
allChunks: true,
disable: false
//使用ProvidePlugin加载使用频率高的模块
new webpack.ProvidePlugin({
$: &webpack-zepto&
//页面入口文件配置
index : './src/main.js'
//入口文件输出配置
path: __dirname +'/dist/',
filename: '[name].js'
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
//其它解决方案配置
resolve: {
extensions: ['', '.js', '.json', '.scss'],
filter: path.join(__dirname, 'src/filters')
entry是页面入口文件配置，可以是一个文件或者多个入口文件，可以是对象格式或者数组格式。
index : './src/main.js'
entry:['./src/main.js','./src/index.js']
output 是对应输出项配置,主要包括path,filename和publishPath属性。path代表输出的路径，filename代表输出的文件名称，publishPath代表静态资源发布后的前缀地址。
module.loaders
是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。。
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
loader主要有3种使用方式：
1、在页面里面引用资源使用
require(&url-loader?mimetype=image/png!./file.png&);
2、在webpack.config.js文件夹中使用
{ test: /.png$/, loader: &url?mimetype=image/png& };
3、在命令行中编译使用
webpack --module-bind &png=url-loader?mimetype=image/png&;
如上，&-loader&其实是可以省略不写的，多个loader之间用“!”连接起来。
注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。
拿最后一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
npm install url-loader -save-dev
配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）。也可以使用file-loader来加载资源文件。
是插件项，这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。。
plugins: [
//提公用js到common.js文件中
new monsChunkPlugin('common.js'),
//将样式统一发布到style.css中
new ExtractTextPlugin(&style.css&, {
allChunks: true,
disable: false
//使用ProvidePlugin加载使用频率高的模块
new webpack.ProvidePlugin({
$: &webpack-zepto&
如上，包含两种：
1、第一种webpack自带的一些插件：webpack.ProvidePlugin、monsChunkPlugin，
2、另外一种则通过npm包安装的：ExtractTextPlugin。
最后是 resolve 配置，这块很好理解，直接写注释了：
resolve: {
// require时省略的扩展名，如：require('module') 不需要module.js
extension: ['', '.js'],
filter: path.join(__dirname, 'src/filters')
使用Webpack-dev-server
是基于node.js Express服务，它同时包含了一个基于轻量的运行时环境。
'use strict'
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
// 配置代码自动编译和热替换插件
config.entry.unshift('webpack-dev-server/client?http://localhost:9090', &webpack/hot/dev-server&);
config.plugins.push(new webpack.HotModuleReplacementPlugin());
// 这里配置：请求http://localhost:9090/index.php，
// 相当于通过本地node服务代理请求到了/index.php
var proxy = [{
path: &/index.php/*&,
target: &&,
//启动服务
var app = new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
historyApiFallback: true,
proxy:proxy
app.listen(9090);
如上，引用webpack和webpack-dev-server模块，通过WebpackDevServer启动服务，通过HotModuleReplacementPlugin插件启动代码自动编译页面自动刷新。这样，当你修改了html、js或者样式文件，页面会自动编译刷新。
html页面使用
直接在页面引入 webpack 最终生成的页面脚本和样式文件即可。
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8&&
&title&webpack test&/title&
&link rel=&stylesheet& href=&/dist/style.css&&
&div id=&app&&&/div&
&script src=&/dist/common.js&&&/script&
&script src=&/dist/build.js&&&/script&
基于 webpack 的入门教程就到这里，希望本文能对你有所帮助，你也可以参考下面的项目进行参考。
,基于Vue.js重写的cnodejs的webapp,其中采用的webpack进行打包处理。
阅读(...) 评论()Webpack-dev-server结合后端服务器的热替换配置 - 简书
下载简书移动应用
写了20898字，被217人关注，获得了748个喜欢
Webpack-dev-server结合后端服务器的热替换配置
Webpack是一个模块加载器，这里所谓模块其实就是项目中用到javascript、coffeescript、css、less、jsx以及图片等等资源，Webpack采用不同的loader将这些资源加载后打包，然后输出打包后的文件，打包后的文件可以是一个或多个js文件，也可以根据需要分别打包，比如将所有css文件单独输出。下图可以比较直观的说明webpack是做什么的。
更多信息可以参考webpack的 Webpack有一个很实用的功能叫做热替换（Hot-replace），尤其是结合React Hot Loader插件，开发过程中都不需要刷新浏览器，任何前端代码的更改都会实时的在浏览器中表现出来。首先需要安装Webpack-dev-server,一个轻量的node.js express服务器。npm install webpack-dev-server --save-devWebpack-dev-server十分小巧，这里的作用是用来伺服资源文件，不能替代后端的服务器，因此如果你还要进行后端开发，就要采用双服务器模式：一个后端服务器和一个资源服务器（即Webpack-dev-server)配置双服务器热替换模式首先需要修改Wepack.config.js的entry条目entry: [
'webpack-dev-server/client?http://0.0.0.0:9090',//资源服务器地址
'webpack/hot/only-dev-server',
'./static/js/entry.coffee']注意，由于要结合了后端服务器，因此不采用entry: {
app: ['webpack/hot/dev-server', './app/main.js']}这种形式。接下来修改output条目,将publicPath设置为webpack-dev-server服务器下资源目录的绝对路径output: {
publicPath: "http://127.0.0.1:9090/static/dist/",
path: './static/dist/',
filename: "bundle.js"}在Plugins中增加new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'}),new webpack.HotModuleReplacementPlugin()webpack变量需要在Webpack.config.js的开始处声明var webpack = require('webpack');接着中页面文件中插入打包后的资源文件，注意这里要采用资源服务器的绝对路径&script src="http://127.0.0.1:9090/static/dist/bundle.js"&&/script&双服务器的原理其实就是让后端服务器伺服的页面加载资源服务伺服的资源。如果要实现react的热加载，还需要 ，npm install react-hot-loader --save-dev然后将react-hot loader放在jsx文件loader链的第一位{ test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') }最后就是启动Webpack-dev-server服务器，注意这里要采用inline模式， 如果采用hot模式会出现错误。--content-base 为资源文件夹。另外如果你想用另一台电脑做调试，需要增加--host参数为开发服务器的IP地址，因为默认只能通过localhost进行方式。如果IP地址经常变动，可以写一个脚本方便每次启动服务器
ip=`awk '/inet / && $2 != "127.0.0.1"{print $2}' &(ifconfig)`
node webpack-dev-server.js --port 9090 --inline --host $ip --content-base static/dist/
当资源文件修改时，webpack-dev-server将通过socket.io通知客户端更新．关于Webpack-dev-server的更多资料请
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
如果你是程序员，或者有一颗喜欢写程序的心，喜欢分享技术干货、项目经验、程序员日常囧事等等，欢迎投稿《程序员》专题。
投稿须知：
...
· 111462人关注
干货技术文。
· 2920人关注
关于 js , rails , python,coffee 的各种小 talk
· 495人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、font file、template等。个人认为它的优点就是易用，而且常用功能基本都有,另外可以通过自己开发loader和plugin来满足自己的需求。这里就尽量详细的来介绍下一些基本功能的使用。
JavaScript
npm install webpack
npm install webpack
webpack需要编写一个config文件，然后根据这个文件来执行需要的打包功能。我们现在来编写一个最简单的config。新建一个文件，命名为webpack-config.js。config文件实际上就是一个Commonjs的模块。内容如下：
JavaScript
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname,"build");
var nodemodulesPath = path.resolve(__dirname,'node_modules');
var config = {
//入口文件配置
entry:path.resolve(__dirname,'src/main.js')，
extentions:["","js"]//当requrie的模块找不到时，添加这些后缀
//文件导出的配置
path:buildPath,
filename:"app.js"
module.exports =
12345678910111213141516171819
var webpack = require('webpack');var path = require('path');var buildPath = path.resolve(__dirname,"build");var nodemodulesPath = path.resolve(__dirname,'node_modules');&var config = {&&&&//入口文件配置&&&&entry:path.resolve(__dirname,'src/main.js')，&&&&resolve:{&&&&&&&&extentions:["","js"]//当requrie的模块找不到时，添加这些后缀&&&&},&&&&//文件导出的配置&&&&output:{&&&&&&&&path:buildPath,&&&&&&&&filename:"app.js"&&&&}}&module.exports = config;
我的目录结构是这样的：
|---index.html
|---webpack-config.js
|---main.js
webpack&&&&|---index.html&&&&|---webpack-config.js&&&&|---src&&&&&&&& |---main.js&&&&&&&& |---js&&&&&&&&&&&&&&|---a.js
main.js文件内容如下：
JavaScript
var a = require('./js/a');
console.log('hello world');
document.getElementById("container").innerHTML = "&p&hello world&/p&";
var a = require('./js/a');a();console.log('hello world');document.getElementById("container").innerHTML = "&p&hello world&/p&";
a.js文件内容如下：
JavaScript
module.exports = function(){
console.log('it is a ');
module.exports = function(){&&&&console.log('it is a ');}
然后我们执行如下的命令：
JavaScript
webpack --config webpack-config.js --colors
webpack --config webpack-config.js --colors
这样我们就能在目录里面看到一个新生成的目录build，目录结构如下：
|---index.html
|---webpack-config.js
|---app.js
webpack&&&&|---index.html&&&&|---webpack-config.js&&&&|---build&&&&&&&& |---app.js
然后引用app.js就Ok啦。main.js和模块a.js的内容就都打包到app.js中了。这就演示了一个最简单的把模块的js打包到一个文件的过程了。
webpack是根据config里面描述的内容对一个项目进行打包的。接着我们来解释下config文件中的节点分别代表什么意思。一个config文件，基本都是由以下几个配置项组成的。
配置要打包的文件的入口;可以配置多个入口文件，下面会有介绍。
resolve配置文件后缀名，除了js，还有jsx、coffee等等。除了这个功能还可以配置其他有用的功能，由于我还不完全了解，有知道的朋友欢迎指教。
output配置输出文件的路径，文件名等。
module(loaders)
配置要使用的loader。对文件进行一些相应的处理。比如babel-loader可以把es6的文件转换成es5。大部分的对文件的处理的功能都是通过loader实现的。loader就相当于gulp里的task。loader可以用来处理在入口文件中require的和其他方式引用进来的文件。loader一般是一个独立的node模块，要单独安装。
loader配置项：
JavaScript
test: /\.(js|jsx)$/,//注意是正则表达式，不要加引号，匹配要处理的文件
loader: 'eslint-loader',//要使用的loader，"-loader"可以省略
include: [path.resolve(__dirname, "src/app")],//把要处理的目录包括进来
exclude: [nodeModulesPath]//排除不处理的目录
test: /\.(js|jsx)$/,//注意是正则表达式，不要加引号，匹配要处理的文件&&&&loader: 'eslint-loader',//要使用的loader，"-loader"可以省略&&&&include: [path.resolve(__dirname, "src/app")],//把要处理的目录包括进来&&&&exclude: [nodeModulesPath]//排除不处理的目录
目前已有的loader列表：
一个module的例子:
JavaScript
preLoaders: [
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
include: [path.resolve(__dirname, "src/app")],
exclude: [nodeModulesPath]
loaders: [
test: /\.(js|jsx)$/, //正则表达式匹配 .js 和 .jsx 文件
loader: 'babel-loader?optional=runtime&stage=0',//对匹配的文件进行处理的loader
exclude: [nodeModulesPath]//排除node module中的文件
1234567891011121314151617
module: {&&&&preLoaders: [&&&&&&{&&&&&&&&test: /\.(js|jsx)$/,&&&&&&&&loader: 'eslint-loader',&&&&&&&&include: [path.resolve(__dirname, "src/app")],&&&&&&&&exclude: [nodeModulesPath]&&&&&&},&&&&],&&&&loaders: [&&&&&&{&&&&&&&&test: /\.(js|jsx)$/, //正则表达式匹配 .js 和 .jsx 文件&&&&&&&&loader: 'babel-loader?optional=runtime&stage=0',//对匹配的文件进行处理的loader &&&&&&&&exclude: [nodeModulesPath]//排除node module中的文件&&&&&&}&&&&]}
plugins顾名思义，就是配置要使用的插件。不过plugin和loader有什么差别还有待研究。
来看一个使用plugin的例子：
JavaScript
plugins: [
//压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
//允许错误不打断程序
new webpack.NoErrorsPlugin(),
//把指定文件夹xia的文件复制到指定的目录
new TransferWebpackPlugin([
{from: 'www'}
], path.resolve(__dirname,"src"))
123456789101112131415
plugins: [&&&&//压缩打包的文件&&&&new webpack.optimize.UglifyJsPlugin({&&&&&&compress: {&&&&&&&&//supresses warnings, usually from module minification&&&&&&&&warnings: false&&&&&&}&&&&}),&&&&//允许错误不打断程序&&&&new webpack.NoErrorsPlugin(),&&&&//把指定文件夹xia的文件复制到指定的目录&&&&new TransferWebpackPlugin([&&&&&&{from: 'www'}&&&&], path.resolve(__dirname,"src"))&&]
目前已有的plugins列表：
JavaScript
plugins: [
//压缩打包的文件
new webpack.optimize.UglifyJsPlugin({
compress: {
//supresses warnings, usually from module minification
warnings: false
plugins: [&&&&//压缩打包的文件&&&&new webpack.optimize.UglifyJsPlugin({&&&&&&compress: {&&&&&&&&//supresses warnings, usually from module minification&&&&&&&&warnings: false&&&&&&}&&&&})]
copy文件需要通过插件"transfer-webpack-plugin"来完成。
JavaScript
npm install transfer-webpack-plugin
npm install transfer-webpack-plugin&&-save
JavaScript
var TransferWebpackPlugin = require('transfer-webpack-plugin');
//其他节点省略
plugins: [
//把指定文件夹下的文件复制到指定的目录
new TransferWebpackPlugin([
{from: 'www'}
], path.resolve(__dirname,"src"))
var TransferWebpackPlugin = require('transfer-webpack-plugin');//其他节点省略&&&&plugins: [&&&&//把指定文件夹下的文件复制到指定的目录&&&&new TransferWebpackPlugin([&&&&&&{from: 'www'}&&&&], path.resolve(__dirname,"src"))&&]
支持的js模块化方案包括：
ES6 模块import MyModule from './MyModule.js';
CommonJSvar MyModule = require('./MyModule.js');
AMDdefine(['./MyModule.js'], function (MyModule) {});
上面已经演示了打包js模块,这里不再重复。ES6的模块需要配置babel-loader来先把处理一下js文件。下面展示下打包ES模块的配置文件:
JavaScript
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var TransferWebpackPlugin = require('transfer-webpack-plugin');
var config = {
entry: [path.join(__dirname, 'src/main.js')],
resolve: {
extensions: ["", ".js", ".jsx"]
//node_modules: ["web_modules", "node_modules"]
(Default Settings)
path: buildPath,
filename: 'app.js'
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
new webpack.NoErrorsPlugin(),
new TransferWebpackPlugin([
{from: 'www'}
], path.resolve(__dirname,"src"))
preLoaders: [
test: /\.(js|jsx)$/,
loader: 'eslint-loader',
include: [path.resolve(__dirname, "src/app")],
exclude: [nodeModulesPath]
loaders: [
test: /\.js$/, //注意是正则表达式，不要加引号
loader: 'babel-loader?optional=runtime&stage=0',//babel模块相关的功能请自查，这里不做介绍
exclude: [nodeModulesPath]
//Eslint config
configFile: '.eslintrc' //Rules for eslint
module.exports =
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
var webpack = require('webpack');var path = require('path');var buildPath = path.resolve(__dirname, 'build');var nodeModulesPath = path.resolve(__dirname, 'node_modules');var TransferWebpackPlugin = require('transfer-webpack-plugin');&var config = {&&entry: [path.join(__dirname, 'src/main.js')],&&resolve: {&&&&extensions: ["", ".js", ".jsx"]&&&&//node_modules: ["web_modules", "node_modules"]&&(Default Settings)&&},&&output: {&&&&path: buildPath,&&&&&&&&filename: 'app.js'&&&&},&&plugins: [&&&&new webpack.optimize.UglifyJsPlugin({&&&&&&compress: {&&&&&&&&warnings: false&&&&&&}&&&&}),&&&&new webpack.NoErrorsPlugin(),&&&&new TransferWebpackPlugin([&&&&&&{from: 'www'}&&&&], path.resolve(__dirname,"src"))&&],&&module: {&&&&preLoaders: [&&&&&&{&&&&&&&&test: /\.(js|jsx)$/,&&&&&&&&loader: 'eslint-loader',&&&&&&&&include: [path.resolve(__dirname, "src/app")],&&&&&&&&exclude: [nodeModulesPath]&&&&&&},&&&&],&&&&loaders: [&&&&&&{&&&&&&&&test: /\.js$/, //注意是正则表达式，不要加引号&&&&&&&&loader: 'babel-loader?optional=runtime&stage=0',//babel模块相关的功能请自查，这里不做介绍&&&&&&&&exclude: [nodeModulesPath]&&&&&&}&&&&]&&},&&//Eslint config&&eslint: {&&&&configFile: '.eslintrc' //Rules for eslint&&},};&module.exports = config;
css/sass/less
安装css-loader和style-loader
JavaScript
npm install css-loader --save -dev
npm install style-loader --save -dev
npm install css-loader --save -devnpm install style-loader --save -dev
config配置：
JavaScript
var config = {
entry:path.resolve(__dirname,'src/main.js'),
extentions:["","js"]
path:buildPath,
filename:"app.js"
loaders:[{
test:/\.css$/,
loader:'style!css',
exclude:nodemodulesPath
1234567891011121314151617
var config = {&&&&entry:path.resolve(__dirname,'src/main.js'),&&&&resolve:{&&&&&&&&extentions:["","js"]&&&&},&&&&output:{&&&&&&&&path:buildPath,&&&&&&&&filename:"app.js"&&&&},&&&&module:{&&&&&&&&loaders:[{&&&&&&&&&&&&test:/\.css$/,&&&&&&&&&&&&loader:'style!css',&&&&&&&&&&&&exclude:nodemodulesPath&&&&&&&&}]&&&&}}
style-loader会把css文件嵌入到html的style标签里，css-loader会把css按字符串导出，这两个基本都是组合使用的。打包完成的文件，引用执行后，会发现css的内容都插入到了head里的一个style标签里。如果是sass或less配置方式与上面类似。
可以通过url-loader把较小的图片转换成base64的字符串内嵌在生成的文件里。安装：
JavaScript
npm install url-loader --save -dev
npm install url-loader --save -dev
config配置:
JavaScript
var config = {
entry:path.resolve(__dirname,'src/main.js'),
extentions:["","js"]
path:buildPath,
filename:"app.js"
loaders:[{
test:/\.css$/,
loader:'style!css',//
exclude:nodemodulesPath
{ test:/\.png$/,loader:'url-loader?limit=10000'}//限制大小小于10k的
12345678910111213141516171819
var config = {&&&&entry:path.resolve(__dirname,'src/main.js'),&&&&resolve:{&&&&&&&&extentions:["","js"]&&&&},&&&&output:{&&&&&&&&path:buildPath,&&&&&&&&filename:"app.js"&&&&},&&&&module:{&&&&&&&&loaders:[{&&&&&&&&&&&&test:/\.css$/,&&&&&&&&&&&&loader:'style!css',//&&&&&&&&&&&&exclude:nodemodulesPath&&&&&&&&},&&&&&&&&{ test:/\.png$/,loader:'url-loader?limit=10000'}//限制大小小于10k的&&&&&&&&]&&&&}}
css文件内容：
#container{
color: #f00;
background:url(images/logo-201305.png);
/*生成完图片会被处理成base64的字符串 注意：不要写'/images/logo-201305.png',否则图片不被处理*/
#container{&&&&color: #f00;&&&&background:url(images/logo-201305.png);&&&&/*生成完图片会被处理成base64的字符串 注意：不要写'/images/logo-201305.png',否则图片不被处理*/}
内嵌iconfont的使用方法其实和上述处理png图片的方法一致。通过url-loader来处理。
config配置：
JavaScript
var config = {
entry:path.resolve(__dirname,'src/main.js'),
extentions:["","js"]
path:buildPath,
filename:"app.js"
loaders:[{
test:/\.css$/,
loader:'style!css',//
exclude:nodemodulesPath
{ test:/\.(png|woff|svg|ttf|eot)$/,loader:'url-loader?limit=10000'}//限制大小小于10k的
12345678910111213141516171819
var config = {&&&&entry:path.resolve(__dirname,'src/main.js'),&&&&resolve:{&&&&&&&&extentions:["","js"]&&&&},&&&&output:{&&&&&&&&path:buildPath,&&&&&&&&filename:"app.js"&&&&},&&&&module:{&&&&&&&&loaders:[{&&&&&&&&&&&&test:/\.css$/,&&&&&&&&&&&&loader:'style!css',//&&&&&&&&&&&&exclude:nodemodulesPath&&&&&&&&},&&&&&&&&{ test:/\.(png|woff|svg|ttf|eot)$/,loader:'url-loader?limit=10000'}//限制大小小于10k的&&&&&&&&]&&&&}}
css文件内容：
@font-face {font-family: 'iconfont';
src: url('fonts/iconfont.eot'); /* IE9*/
src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/iconfont.woff') format('woff'), /* chrome、firefox */
url('fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
@font-face {font-family: 'iconfont';src: url('fonts/iconfont.eot'); /* IE9*/src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('fonts/iconfont.woff') format('woff'), /* chrome、firefox */url('fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}
执行打包后会把字体文件都转换成base64字符串内容到文件里.这里有个头疼的问题，就是每个浏览器支持的字体格式不一样，由于把全部格式的字体打包进去，造成不必要的资源浪费。
我一大包handlebars的模块为例，来演示下打包模块的过程。有的模板对应的loader，有可能没有现车的，恐怕要自己实现loader。
先安装必须的node模块
JavaScript
npm install handlebars-loader --save -dev
npm install handlebars -save//是必须的
npm install handlebars-loader --save -devnpm install handlebars -save//是必须的
config配置:
JavaScript
var config = {
entry:path.resolve(__dirname,'src/main.js'),
extentions:["","js"]
path:buildPath,
filename:"app.js"
{ test: /\.html$/, loader: "handlebars-loader" }
123456789101112131415
var config = {&&&&entry:path.resolve(__dirname,'src/main.js'),&&&&resolve:{&&&&&&&&extentions:["","js"]&&&&},&&&&output:{&&&&&&&&path:buildPath,&&&&&&&&filename:"app.js"&&&&},&&&&module:{&&&&&&&&loaders:[&&&&&&&&{ test: /\.html$/, loader: "handlebars-loader" }&&&&&&&&]&&&&}}
新建一个模板文件tb.html，目录结构：
|---index.html
|---webpack-config.js
|---template
|---tb.html
|---main.js
webpack&&&&|---index.html&&&&|---webpack-config.js&&&&|---src&&&&&&&& |---template&&&&&&&& |&&&&&&&& |---tb.html&&&&&&&& |---main.js
main.js中调用模块的代码如下：
JavaScript
var template = require("./template/tp.html");
var data={say_hello:"it is handlebars"};
var html = template(data);
document.getElementById('tmpl_container').innerHTML =
var template = require("./template/tp.html");var data={say_hello:"it is handlebars"};var html = template(data);document.getElementById('tmpl_container').innerHTML = html;
这需要通过插件“CommonsChunkPlugin”来实现。这个插件不需要安装，因为webpack已经把他包含进去了。接着我们来看配置文件：
JavaScript
var config = {
entry:{app:path.resolve(__dirname,'src/main.js'),
vendor: ["./src/js/common"]},//【1】注意这里
extentions:["","js"]
path:buildPath,
filename:"app.js"
loaders:[{
test:/\.css$/,
loader:'style!css',
exclude:nodemodulesPath
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
//【2】注意这里
这两个地方市用来配置common.js模块单独打包的
new monsChunkPlugin({
name: "vendor",//和上面配置的入口对应
filename: "vendor.js"//导出的文件的名称
12345678910111213141516171819202122232425262728293031
var config = {&&&&entry:{app:path.resolve(__dirname,'src/main.js'),&&&&&&&&&&&&vendor: ["./src/js/common"]},//【1】注意这里&&&&resolve:{&&&&&&&&extentions:["","js"]&&&&},&&&&output:{&&&&&&&&path:buildPath,&&&&&&&&filename:"app.js"&&&&},&&&&module:{&&&&&&&&loaders:[{&&&&&&&&&&&&test:/\.css$/,&&&&&&&&&&&&loader:'style!css',&&&&&&&&&&&&exclude:nodemodulesPath&&&&&&&&}&&&&&&&&]&&&&},&&&&plugins:[&&&&&&&&new webpack.optimize.UglifyJsPlugin({&&&&&&&&&&&& compress: {&&&&&&&&&&&&&&&&warnings: false&&&&&&&&&&&& }&&&&&&&&}),&&&&&&&&//【2】注意这里&&这两个地方市用来配置common.js模块单独打包的&&&&&&&&new webpack.optimize.CommonsChunkPlugin({&&&&&&&&&&&&name: "vendor",//和上面配置的入口对应&&&&&&&&&&&&filename: "vendor.js"//导出的文件的名称&&&&&&&&})&&&&]}
目录结构现在是这样的：
|---index.html
|---webpack-config.js
|---main.js
//a里面require了common
|---common.js
webpack&&|---index.html&&|---webpack-config.js&&|---src&&&& |---main.js&&&& |---js&&&&&&&&&&|---a.js&&&&//a里面require了common&&&&&&&&&&|---common.js
执行webpack会生成app.js和common.js两个文件.
config配置：
JavaScript
var config = {
m1:path.resolve(__dirname,'src/main.js'),
m2:path.resolve(__dirname,'src/main1.js')
},//注意在这里添加文件的入口
extentions:["","js"]
path:buildPath,
filename:"[name].js"//注意这里使用了name变量
12345678910111213
var config = {&&&&&&&&entry:{&&&&&&&&m1:path.resolve(__dirname,'src/main.js'),&&&&&&&& m2:path.resolve(__dirname,'src/main1.js')&&&&},//注意在这里添加文件的入口&&&&resolve:{&&&&&&&&extentions:["","js"]&&&&},&&&&output:{&&&&&&&&path:buildPath,&&&&&&&&filename:"[name].js"//注意这里使用了name变量&&&&}&&&&}
在开发的过程中个，我们肯定不希望，每次修改完都手动执行webpack命令来调试程序。所以我们可以用webpack-dev-server这个模块来取代烦人的执行命令。它会监听文件，在文件修改后，自动编译、刷新浏览器的页面。另外，编译的结果是保存在内存中的，而不是实体的文件，所以是看不到的，因为这样会编译的更快。它就想到与一个轻量的express服务器。安装：
JavaScript
npm install webpack-dev-server --save -dev
npm install webpack-dev-server --save -dev
config配置：
JavaScript
var config = {
entry:path.resolve(__dirname,'src/main.js'),
extentions:["","js"]
//Server Configuration options
devServer:{
contentBase: '',
//静态资源的目录 相对路径,相对于当前路径 默认为当前config所在的目录
devtool: 'eval',
hot: true,
//自动刷新
inline: true,
port: 3005
devtool: 'eval',
path:buildPath,
filename:"app.js"
plugins: [
new webpack.HotModuleReplacementPlugin(),//这个好像也是必须的，虽然我还没搞懂它的作用
new webpack.NoErrorsPlugin()
1234567891011121314151617181920212223
var config = {&&&&entry:path.resolve(__dirname,'src/main.js'),&&&&resolve:{&&&&&&&&extentions:["","js"]&&&&},&&&&//Server Configuration options&&&&devServer:{&&&&&&&&contentBase: '',&&//静态资源的目录 相对路径,相对于当前路径 默认为当前config所在的目录&&&&&&&&devtool: 'eval',&&&&&&&&hot: true,&&&&&&&&//自动刷新&&&&&&&&inline: true,&&&&&&&&&&&&port: 3005&&&&&&&&&&&&},&&&&devtool: 'eval',&&&&output:{&&&&&&&&path:buildPath,&&&&&&&&filename:"app.js"&&&&},&&&&plugins: [&&&&&&&&new webpack.HotModuleReplacementPlugin(),//这个好像也是必须的，虽然我还没搞懂它的作用&&&&&&&&new webpack.NoErrorsPlugin()&&&&]}
我的目录结构:
|---index.html
|---webpack-config.js//我把静态资源目录配置在了这里
|---main.js
|---common.js
webpack&&|---index.html&&|---webpack-config.js//我把静态资源目录配置在了这里&&|---src&&&& |---main.js&&&& |---js&&&&&&&&&&|---a.js&&&&&&&&&&|---common.js
执行命令：
JavaScript
webpack-dev-server --config webpack-dev-config.js
--inline --colors
webpack-dev-server --config webpack-dev-config.js&&--inline --colors
默认访问地址： http://localhost/:3000/index.html(根据配置会不一样)
有一点需要声明，在index.html（引用导出结果的html文件）里直接引用“app.js”，不要加父级目录,因为此时app.js在内存里与output配置的目录无关：
JavaScript
&script type="text/javascript" src="app.js"&&/script&
&script type="text/javascript" src="app.js"&&/script&
详细文档在这里查看：
原文 /a/2052
您可以选择一种方式赞助本站
阅读 732 views
阅读 96 views
阅读 224 views
阅读 510 views