造轮子进阶--webpack4&vue2

css

npm i css-loader style-loader –save-dev

在webpack.config.js 中增加如下配置：

rules: [{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'     // 执行顺序是从右往左
  ]
}

创建css文件，并引入，打包后可以正常解析，但是css文件是混入js中，所以需要分离css.

分离css

webpack4中完成这个功能的插件是mini-css-extract-plugin.

npm install mini-css-extract-plugin --save-dev

在webpack.prod.js 中增加如下配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader'   // 注意不能有style-loader
               ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:  'css/[name].css'
        })
    ]
}

压缩css

const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");//CSS模块资源优化插件

optimization:{
    //对生成的CSS文件进行代码压缩 mode='production'时生效
    minimizer:[
       new OptimizeCssAssetsPlugin()
    ]
}

postcss-loader

npm i -D postcss postcss-loader autoprefixer

rules: [
  {
    test: /\.scss$/,
    exclude: /node_modules/, //排除node_modules文件夹
    use: [
       'css-loader',
       'postcss-loader'
    ]
  }
]

postcss.config.js的配置较为简单：

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

处理图片

新建文件夹src/images，用来放图片。

file-loader

npm i file-loader --save-dev

{
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]?[hash]'
  }
}

url-loader

npm i url-loader --save-dev

{
    test:/\.(jpg|png|svg|gif)/,
    use:[{
      loader:'url-loader',
      options:{
        limit:8129,   //小于limit限制的图片将转为base64嵌入引用位置
        fallback:'file-loader', //大于limit限制的将转交给指定的loader处理
        name: 'img/[name].[hash:7].[ext]'
      }
    }]
  }

区别
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和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；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

扩展---vue中的图片动态引用

img标签

<template>
    <img :src="imgUrl">
</template>

第一种：

import imgUrl from "../assets/test.png";

第二种：

data() {
    return {
        imgUrl: require("../assets/test.png")
    }
}

第三种：

created() {
    this.imgUrl = require("@/" + urlTemp);
}

background url

公司项目中有个需求，就是每个模块都要展示介绍功能的图片，切模块时，图片要相应的改变，是通过background来实现的，这个时候就需要动态引用图片。
实现方式如下：

<div :style="{background: 'url(' + require('../assets/' + imgUrl[i]) +')'}"></div>

data() {
    return {
        imgUrl: [
            "test1.png",
            "test2.png",
            "test3.png",
        ]
    }
}

或者直接将图片放入static文件夹中，也可以通过循环拿到。

然后，我试验了一下，除了以上两种方式，其他方式写的都报错。不知道有没有大佬指点一下~~
下面的只是记录一下，跟上面的无关，

<div :style="style"></div>

data() {
    return {
        style: [
            {background: 'url(' + require('../assets/test1.png') +')'}   // 不能写变量
        ]
    }
}

扩展---vue中的图片静态引用

img标签

1.相对路径
2."~@/assets/test.png"，其中~相当于require

background url

css中背景图片路径问题
在css里写background:url(../images/xx.jpg)，如果图片较大，没有生成DataURl，会出现路径错误问题，解决方法如下：

// 用了 MiniCssExtractPlugin.loader的话，给他配置单独的 publicPath
rules: [
    {
        test: /\.css$/,
        use: [
            {
                loader: MiniCssExtractPlugin.loader，
                options:{
                        publicPath: '../'
                }
            },
            'css-loader'   // 注意不能有style-loader
       ]
    }
]

雪碧图

npm i -D webpack-spritesmith

在webpack.prod.js 中增加如下配置：

const SpritesmithPlugin = require('webpack-spritesmith');

plugins: [
  new SpritesmithPlugin({
    src: {
      cwd: path.resolve(__dirname, '../src/assets/images/icons/'), // 图标根路径
      glob: '**/*.png' // 匹配任意 png 图标
    },
    target: {
      image: path.resolve(__dirname, '../src/assets/css/sprites-generated.png'), // 生成雪碧图目标路径与名称
      css: path.resolve(__dirname, '../src/assets/css/sprites-generated.css')   // 设置生成CSS背景及其定位的文件或方式
      ]
    },
    apiOptions: {
      cssImageRef: "./sprites-generated.png",  // css文件中引用雪碧图的相对位置路径配置
    },
  })
]

npm run build，我们可以发现在目标目录下生成了 sprites-generated.png 和 sprites-generated.css 两个文件，引用sprites-generated.css就可以了。

处理js文件

参考链接：webpack4.0各个击破（4）—— Javascript & splitChunk

代码分离

webpack4废弃了CommonsChunkPlugin插件，使用optimization.splitChunks和optimization.runtimeChunk来代替。

webpack将会基于以下条件自动分割代码块:

• 新的代码块被共享或者来自node_modules文件夹
• 新的代码块大于30kb(在min+giz之前)
• 按需加载代码块的请求数量应该<=5
• 页面初始化时加载代码块的请求数量应该<=3

在webpack.prod.js 中增加如下配置：

optimization: {
    splitChunks: {
        chunks: "async", //默认只作用于异步模块，为`all`时对所有模块生效,`initial`对同步模块有效
        minSize: 30000,  //合并前模块文件的体积
        minChunks: 1,  //最少被引用次数
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
            vendors: {
                name: "vendor",
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                chunks: "all"
            },
        default: {
                name: "common",        
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    }
}