webpack打包js，css和图⽚webpack打包流程 面试
1、webpack打包默认配置⽂件fig.js
2、打包js⽂件：有这个⽂件并配置可以直接在cmd上webpack打包，没有这个⽂件要在cmd上输⼊ webpack main.js build.js
3、打包css⽂件：要在cmd上输⼊npm install style-loader css-loader 安装
//配置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）需要引⽤的分⽀⽂件
//配置⽂件出⼝
addFun:add
};
2）需要引⽤的主⽂件
require("./com.css");//引⼊要打包的css⽂件var cale=require('./add.js');//引⼊要打包的js⽂件console.log(cale.addFun(1,2));//调⽤函数⽅法注：压缩build.js直接在cmd上输⼊webpack -p

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。