1、webpack打包默认配置文件webpack.config.js
2、打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.js build.js
3、打包css文件:要在cmd上输入npm install style-loader css-loader 安装
module.exports={ //配置js entry:‘./main.js‘,//webpack要打包的源文件 output:{ filename:‘build.js‘//打包输出的文件名称 }, module:{ loaders:[ { test:/\.css$/, //配置css loader:‘style-loader!css-loader‘ }, { test: /\.(png|jpg)$/, //配置css中的图片,html中的图片示例在下面 loader: ‘url-loader?limit=8192‘ } ] } };
url-loader 后面除了 limit 字段,还可以通过 name 字段来指定图片打包的目录与文件名:
module: { loaders: [ { test: /\.(png|jpg)$/, loader: ‘url-loader?limit=8192&name=images/[hash:8].[name].[ext]‘ } ] }
上例中的 name 字段指定了在打包根目录(output.path)下生成名为 images 的文件夹,并在原图片名前加上8位 hash 值。
css 文件和 images 文件夹保持了同样的层级,可以不做任务修改即能访问到图片。区别是打包后的图片加了 hash 值,bundle.css 文件里引入的也是有hash值的图片。
output.publicPath 表示资源的发布地址,当配置过该属性后,打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。
output: { path: ‘dist‘, publicPath: ‘/assets/‘, filename: ‘bulid.js‘ }
4、打包图片:打包图片有三种,html中的图片,css中的图片,js中的图片,在 webpack 中引入图片需要依赖 url-loader 这个加载器。npm install url-loader --save-dev
test 属性代表可以匹配的图片类型,除了 png、jpg 之外也可以添加 gif 等,以竖线隔开即开。loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用。
由于 webpack 对 html 的处理不太好,打包 HTML 文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件—— html-withimg-loder $ npm install html-withimg-loader --save-dev
module: { loaders: [ { test: /\.html$/, loader: ‘html-withimg-loader‘ } ] }
注:在 build.js 中引用 html 文件
import ‘../index.html‘;
JS中的图片应该是通过模块化的方式引用图片路径
var imgUrl = require(‘./images/bg.jpg‘), imgTempl = ‘<img src="‘+imgUrl+‘" />‘; document.body.innerHTML = imgTempl
1)需要引用的分支文件
//配置文件出口 module.exports={ addFun:add };
2)需要引用的主文件
require("./com.css");//引入要打包的css文件 var cale=require(‘./add.js‘);//引入要打包的js文件 console.log(cale.addFun(1,2));//调用函数方法
注:压缩build.js直接在cmd上输入webpack -p