在loader使用时不需要用require引入，在plugins（插件）才需要使用require引入
file-loader
解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，
而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，
将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
url-loader
如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。
再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，
大于limit的还会使用file-loader进行copy。
为什么只使用url-loader
有的小伙伴会发现我们并没有在webpack.config.js中使用file-loader，但是依然打包成功了。我们需要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢？
简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。
通过上面的介绍，我们可以看到，url-loader工作分两种情况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。
也就是说，其实我们只安装一个url-loader就可以了。但是为了以后的操作方便，我们这里就顺便安装上file-loader。
目录
在entry.js中引入要打包进js的css
import css from './css/entry.css'
webpack.config.js配置文件
// node中的引入路径模块
const path = require('path');
// 引入webpack
const webpack = require('webpack');
// 打包html
const htmlPlugin= require('html-webpack-plugin');
// 压缩js
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
//入口文件的配置项
entry: {
entry: './src/js/entry.js'
},
//出口文件的配置项
output: {
//输出的路径，用了Node语法
path: path.resolve(__dirname, 'dist'),
//输出的文件名称
filename: 'js/bundle.js'
},
//模块：例如解读CSS,图片如何转换，压缩
module: {
rules: [
{
// 用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
test: /\.css$/,
// loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
use: ['style-loader', 'css-loader']
// include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
// query：为loaders提供额外的设置选项（可选）
},
{
test:/\.(png|jpg|gif)/ ,
// 指定使用的loader和loader的配置参数
use:[{
loader:'url-loader',
options:{
// 把小于500000B(488kb)的文件打成Base64的格式，写入JS 小于则帮你复制图片过去并引入
// limit:500000
// 现在是以图片形式引入
limit:50,
// 指定图片输出的目录
outputPath:'images/'
}
}]
}
]
},
//插件，用于生产模版和各项功能 压缩打开 热更新就会失效
plugins: [
// new uglify(),
new htmlPlugin({
// 是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号
minify:{
removeAttributeQuotes:true
},
// 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS
hash:true,
// 是要打包的html模版路径和文件名称
template:'./src/index.html'
})
],
//配置webpack开发服务功能
devServer: {
//设置基本目录结构
contentBase: path.resolve(__dirname, 'dist'),
//服务器的IP地址，可以使用IP也可以使用localhost
host: 'localhost',
//服务端压缩是否开启
compress: true,
//配置服务端口号
port: 9079
}
}
package.json依赖项
{
"name": "xz",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3"
}
}
打包命令
npm start 开发环境 webpack 生产环境
