var webpack = require('webpack'); module.exports = { entry: './entry.js', output: { path: __dirname, filename: 'https://www.jb51.net/bundle.js' }, module: { loaders: [ {test: /.css$/, loader: 'style!css'} ] }, plugins: [ new webpack.BannerPlugin('This file is created by mutouren') ] }
然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：
/! This file is created by mutouren / /**/ (function(modules) { // webpackBootstrap /**/ // The module cache /**/ var installedModules = {}; // 后面代码省略......
一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
npm install url-loader
修改style.css文件
body { color:#fff; background: url('./logo.png'); }
配置webpack.config.js文件
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "https://www.jb51.net/bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style!css" }, { test: /.(png|jpg)$/, loader: "url?limit=40000" } // 添加到这 ] } };
注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片。
我们还是运行
webpack
将会看到背景图片已设置成功。
八.在 Webpack 中使用别名
模块别名定义，方便后续直接引用别名，无须多写长长的地址，比如我们现在想要把scripts/jquery.min.jsjquery压缩文件打包.
别名（resolve.alias） 是 Webpack 的一个配置项，它的作用是把用户的一个请求重定向到另一个路径，例如通过修改 webpack.config.js 配置文件，jquery为别名加入：
resolve: { alias: { jquery: "./scripts/jquery.min.js" } }
例如我们之前不用别名，在entry.js中，想要把jquery打包
require('./scripts/jquery.min.js');
设置别名，就可以修改为
require('jquery');
这样待打包的脚本中的 require('jquery'); 其实就等价于 require('./scripts/jquery.min.js'); 。通过别名的使用在本例中可以减少几乎一半的时间。
我们把需要的jquery打包了，但是现在前台页面想要直接用还是不可以的，需要我们把jquery暴露出来。
你可能在全局中使用了一个压缩版本的 jquery，为了修复你可以安装这个暴露全局加载器
npm install expose-loader --save-dev
然后像下面这样修改entry.js：
require('expose?$!jquery');
把$作为别名为jquery的变量暴露到全局上下文中。
现在我们在页面就可以使用$，例如：