webpack打包js，css和图片

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]'//图片被打包在images目录下并在原图片名前加上8位 hash 值
　　　　}
　　]
}

上例中的 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，如果缺少file-loader，npm install file-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