webpack工程化06（文件处理）

今天来说说，webpack中文件的处理，先来看一个简单的demo。

//base.css
body {
    background: url('../assets/img/2017yj.jpg')
}

//app.js
import './style/base.css'

webpack.config.js
const path = require('path')

module.exports = {
    entry: {
        app: path.join(__dirname, 'src/app.js')
    },
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'}
                ]
            }
        ]
    }
}

我们之前讲过style-loader，跟css-loader一个是处理css一个是把css插入到html中。

但是在我们进行打包的是时候，会报一个错误，这是因为图片属于资源文件，我们需要额外的loader来处理。

所以，我们需要借助file-loader来处理图片资源。

在rules下面加一条规则

            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                      loader: 'file-loader',
                      options: {}
                    }
                ]
            }

然后我们再重新打包一下。

打包成功，但是页面上依然没有图片，我们可以打开开发工具看一下，这张图片的地址，发现图片的地址不对，应该是从dist下面取，所以我们在output中加一个publicPath

 output: {
        filename: '[name].bundle.js',
        publicPath: 'dist/',
        path: path.join(__dirname, 'dist')
    },

再重新打包，图片就出来。

有些时候，我们可能需要把一些小图片打包成base64位，那么我们就可以使用url-loader

                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                      loader: 'url-loader',
                      options: {
                        limit: 1000
                      }
                    }
                ]

如果limit不设置，则默认打包成base64位

再优化一点，我们可以使用img-loader将图片的大小进行压缩。

test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                      loader: 'url-loader',
                      options: {
                        limit: 1000
                      }
                    },
                    {
                        loader: 'img-loader',
                        options: {
                            plugins: [
                                require('imagemin-mozjpeg')({
                                    progressive: true,
                                    arithmetic: false
                                }),
                            ]
                        }
                    }
                ]

再打包一下，图片就由原来的125kb变成了80kb

此外还有一些小图标，我们希望可以合成雪碧图或者是字体图标，这样可以减少网络请求，使用也方便。

我们可以使用一个插件webpack-spritesmith

        new SpritesmithPlugin({
            src: {
                // 需要合成雪碧图的目录，以及图片格式
                cwd: path.resolve(__dirname, 'src/assets/img'),
                glob: '*.png'
            },
            target: {
                // 成功雪碧图的目录，以及字体样式
                image: path.resolve(__dirname, 'src/assets/img/sprite.png'),
                css: [
                    path.resolve(__dirname, 'src/assets/font/sprite.styl'),
                ]
            },
            apiOptions: {
                cssImageRef: "~sprite.png"
            }
        })

而且在npm上，css配置可以用函数来处理，也就是说我们根据自己的需求来生成文件，比如h5有时候需要2倍的图标。

华丽的分割线，下面说说第三方依赖的处理

---

比如我现在要在项目中用jquery，要怎么处理呢？

第一种方式，就是直接用cdn在项目中引入，这种方式当然是可以的，但项目中一般不这么干。

第二种方式就是通过插件来处理，（ProvidePlugin）这个插件是webpack自带的，所以不需要额外安装包，只需要引入webpack就行。

        new webpack.ProvidePlugin({
            $: 'jquery'
        })

配置也很简单，给ProvidePlugin传一个key-value的对象。

//app.js
import './style/base.css'

setTimeout(()=> {
    $('#app').html('this is jquery')
},2000)

其他不变，我们打包试一下。

app.bundle.js的文件大小变成了80KB，我们再来看一下结果。（2秒之后，内容变成了this is query）

之前jquery是通过npm安装的，但是如果jquery文件在本地怎么办呢？

我们可以配置一个路径映射来解决。

npm uninstall jquery -D

我们先把jquery卸载掉，然后下载一个jquery.min.js放在本地。

在配置文件中加一个映射

 resolve: {
        alias: {
            jquery: path.join(__dirname, 'src/common/jquery.min.js')
        }
    },

重新打包，也是正常的。