9102了，快来了解webpack4！

前言

在当今的前端开发中，咱们使用的打包工具可能会有不少种，固然webpack就是其中一种，那么webpack中的配置其实是不少的，因此今天来整理下经常使用的配置以及它的做用。

如何开始

咱们建立一个空的文件夹，而后使用npm init webpack-demo，下面一路回车,而后他会在咱们的文件夹下建立一个package.json这样的文件

在当前项目中安装webpack4

咱们能够执行这条命令： npm install webpack-cli webpack -D

那么这里假设webpack最新版本号是：4.1.2,若是咱们不想安装最新的版本，而是咱们人工选择，该如何选择呢？

npm info webpack 执行这条命令后控制台就会列出webpack的全部可用版本

那么找到咱们想要安装的版本，记录下版本号(假设咱们想安装webpack4.16.5这个版本)

咱们就可使用npm install webpack@4.16.5 -D安装指定版本的webpack了。

开始配置

webpack4中官方已经提供了默认配置，但有时并非那么符合咱们的需求，咱们想自行配置，那么咱们能够在项目目录下建立webpack.config.js文件，来书写本身的配置

配置介绍

const path = require('path')
module.exports = {
    mode: 'production',
    entry: {
        main: './index.js'
    },
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname,'build')
    }
}
复制代码

那么上面的配置意思是告诉webpack应该从 index.js文件开始打包，打包后生成的文件应该放到build文件夹下，生成的文件名叫bundle.js,这里须要注意的是path必须是绝对路径，因此这块咱们须要引入nodejs的path模块来辅助咱们,若是mode是production那么意味着打包后的js是被压缩过的代码，固然这里填写development的话代码就不会被压缩了

Loader

那么咱们为何须要使用Loader,是由于webapck在默认状况下，他只知道如何打包JS文件，而不知道如何打包图片，字体等其余类型文件，因此在这里咱们就须要借助Loader来辅助webpack在打包时对特殊文件进行处理。

图片文件打包配置

咱们在上面的基础之上进行配置

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        main: './index.js'
    },
    module:{
      rules: [{
          test: /\.jpg$/,
          use: {
            loader:'file-loader'
          }
        }]  
    },
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname,'build')
    }
}
复制代码

那么在这里咱们增长了一个module配置，这里其实就是告诉webpack如何打包模块，rules就是打包模块的规则，test里写的是匹配规则，use是指使用哪一个loader进行处理，那么这里咱们使用了官方推荐的file-loader，那么这个loader，其实它就能够对图片之类的文件进行处理，因此这样配置咱们就能够成功的进行打包啦。

别忘记安装file-loader的依赖,npm install file-loader -D

webpack-dev-server配置

使用devserver能够提升咱们的开发效率，好比热更新

devServer: {
    contentBase: './dist',
    open: 'true',
    port: 8080,
    hot: true,
    hotOnly:true
  },
复制代码

css打包配置

module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 2
          }
        },
          'sass-loader',
          'postcss-loader']
      }
    ]
  },
复制代码

这里须要注意若是有多个loader,那么loader实际上是从下到上执行，从右到左执行，但这里的postcss-loader又是什么呢，他实际上是为咱们的css加上厂商兼容前缀的。 这里的配置大概意思是说：我先用postcss-loader为css加上厂商前缀，而后交给sass-loader把咱们的sass编译为普通css,再交给咱们的css-loader,而后再交给咱们的style-loader负责把咱们的样式挂载到页面上。

importLoaders: 2这个又是什么意思呢？

咱们也许会有以下场景： 一个scss文件里import了另外一个scss文件，那么有可能在打包时就不会走下面的两个loader(sass-loader,postcss-loader),而是直接走了css-loader，那么若是咱们但愿被引入的scss文件也走下面两个loader就应该配置这个配置，让webpack明白该怎么作处理。

打包iconfont等字体文件

module: {
    rules: [
      {
        test: /\.(eot|ttf|svg|woff|woff2)$/,
        use: {
          loader: 'file-loader'
        }
      }]
  }
复制代码

咱们能够借助file-loader对文件进行打包

Plugins

简介

plugin能够在webpack运行到某个时刻的时候，帮你作一些事情

HtmlwebpackPlugin

const HtmlwebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlwebpackPlugin({
    template: 'src/index.html',
    filename:'index.html'
})]
复制代码

这里咱们使用了一个HtmlwebpackPlugin插件 ，咱们指定了template使用哪一个文件,并指定打包后的文件名

CleanwebpackPlugin

const CleanwebpackPlugin = require('clean-webpack-plugin');
plugins: [new HtmlwebpackPlugin({
    template: 'src/index.html',
    filename:'index.html'
}),new CleanwebpackPlugin()]
复制代码

这个CleanwebpackPlugin能够在打包时帮咱们删除dist文件夹下全部内容。减小了咱们手动操做的频率

babel

咱们的项目不免要作一些兼容性处理，因此咱们要借助babel把咱们的es6代码转换成es5代码 咱们首先应该安装@babel/preset-env和babel-polyfill依赖

module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, '../src'),
        loader: 'babel-loader',
        options:{
            presets:[['@babel/preset-env',{
                useBuiltIns:"usage"
            }]]
        }
      }]
}
复制代码

这块的配置'@babel/preset-env'这个其实只是转换es6的语法为es5的语法，咱们还须要在main.js最上方引入babel-polyfill，这个意思是把一些es6中没有的函数用es5所有模拟一遍， useBuiltIns:"usage"这个的意思是在模拟过程当中，只模拟咱们项目中只模拟项目中用到的es6的函数。

tree-shaking

在webpack中咱们能够对咱们已经引入但未使用的代码作‘摇树’处理（不过须要注意的是这个功能只对esModule起做用） 咱们须要在package.json里配置：sideEffects:[‘babel-polyfill’] 而后打包就能够把除过babel-polyfill的无引用的所有都剔除掉了

code-splitting

咱们须要把打包出来的文件拆分红好多个小文件，防止在更新代码时一次性更新了很大的一个文件，致使用户那边的缓存失效,又要从新下载很大的文件

optimization: {
    runtimeChunk: {
      name: 'runtime'
    },
    splitChunks: {
      chunks: 'all',// 同步异步都打包
      cacheGroups: { 
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          filename: 'vendors.js'
        }
      }
    }
  },
复制代码

css文件代码分割

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
这两个插件咱们得安装
optimization: {
    usedExports: true, // tree shaking
    minimizer: [new OptimizeCssAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[name].chunk.css'
    })
]
复制代码