阅读 9488

webpack4之高级篇

Tree Shaking

  1. css Tree Shaking
yarn add purify-css purifycss-webpack -D
const glob = require('glob')
const PurifyCSSPlugin = require('purifycss-webpack')
// 去除无用的css
plugins: [
    new PurifyCSSPlugin({
      // 路劲扫描 nodejs内置 路劲检查
      paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
    })
]
复制代码
  1. js优化
yarn add webpack-parallel-uglify-plugin -D
const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
plugins: [
new WebpackParallelUglifyPlugin({
      uglifyJS: {
        output: {
          beautify: false, //不需要格式化
          comments: false //不保留注释
        },
        compress: {
          warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
          drop_console: true, // 删除所有的 `console` 语句,可以兼容ie浏览器
          collapse_vars: true, // 内嵌定义了但是只用到一次的变量
          reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
        }
      }
    })
]
复制代码

提取公共代码

大网站有多个页面,每个页面由于采用相同技术栈和样式代码,会包含很多公共代码 链接

// webpack4最新配置,可以搜索关键字查查配置项
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'common'
        }
      }
    }
  },
复制代码

打包第三方类库

  1. DllPlugin插件: 用于打包出一个个动态连接库
  2. DllReferencePlugin: 在配置文件中引入DllPlugin插件打包好的动态连接库
在package.json中
  "scripts": {
    "build": "webpack --mode development",
    "build:dll": "webpack --config webpack.dll.config.js --mode development",
    "dev": "webpack-dev-server --open --mode development"
  }
新建webpack.dll.config.js  
const path = require('path')
const webpack = require('webpack')

/**
 * 尽量减小搜索范围
 * target: '_dll_[name]' 指定导出变量名字
 */

 module.exports = {
   entry: {
     vendor: ['jquery', 'lodash']
   },
   output: {
     path: path.join(__dirname, 'static'),
     filename: '[name].dll.js',
     library: '_dll_[name]' // 全局变量名,其他模块会从此变量上获取里面模块
   },
   // manifest是描述文件
   plugins: [
     new webpack.DllPlugin({
       name: '_dll_[name]',
       path: path.join(__dirname, 'manifest.json')
     })
   ]
 }
 
在webpack.config.js中
plugins: [
    new webpack.DllReferencePlugin({
        manifest: path.join(__dirname, 'manifest.json')
    })
]
执行npm run build:dll 就可以打包第三方包了
复制代码

使用happypack

HappyPack就能让Webpack把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。 happypack

npm i happypack@next -D
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })

  {
    test: /\.js$/,
    // loader: 'babel-loader',
    loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
    include: [resolve('src')],
    exclude: /node_modules/,
  }
  
  plugins: [
    new HappyPack({
      id: 'happy-babel-js',
      loaders: ['babel-loader?cacheDirectory=true'],
      threadPool: happyThreadPool
    })
]
复制代码

显示打包时间

yarn add progress-bar-webpack-plugin -D
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
plugins: [
    new ProgressBarPlugin({
      format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)'
    })
]
复制代码

多页配置

git完整代码链接

  entry: { //entry是一个字符串或者数组都是单页,是对象则是多页,这里是index页和base页
    index: './pages/index/index.js',
    base: './pages/base/base.js'
  }
  
  一个页面对应一个html模板,在plugin中
  plugins: [
    new HtmlWebpackPlugin({
      template: './pages/index/index.html',
      filename: 'pages/index.html',
      hash: true,
      chunks: ['index', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
    new HtmlWebpackPlugin({
      template: './pages/base/base.html',
      filename: 'pages/base.html',
      hash: true,
      chunks: ['base', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
  ]
复制代码

完整多页配置代码如下 git完整代码链接

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const Webpack = require('webpack')
const glob = require('glob')
const PurifyCSSPlugin = require('purifycss-webpack')

// let cssExtract = new ExtractTextWebpackPlugin('static/css/[name].css')

module.exports = {
  entry: {
    index: './pages/index/index.js',
    base: './pages/base/base.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    // name是entry的名字main,hash是根据打包后的文件内容计算出来的hash值
    filename: 'static/js/[name].[hash].js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ExtractTextWebpackPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader']
        })
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['env', 'stage-0', 'react'] 
          }
        }
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: 'initial',
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0, // This is example is too small to create commons chunks
          name: 'common'
        }
      }
    }
  },
  plugins: [
    new CleanWebpackPlugin([path.join(__dirname, 'dist')]),
    new HtmlWebpackPlugin({
      template: './pages/index/index.html',
      filename: 'pages/index.html',
      hash: true,
      chunks: ['index', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
    new HtmlWebpackPlugin({
      template: './pages/base/base.html',
      filename: 'pages/base.html',
      hash: true,
      chunks: ['base', 'common'],
      minify: {
        removeAttributeQuotes: true
      }
    }),
    new ExtractTextWebpackPlugin({
      filename: 'static/css/[name].[hash].css'
    }),
    new PurifyCSSPlugin({
      // 路劲扫描 nodejs内置 路劲检查
      paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9090,
    host: 'localhost',
    overlay: true,
    compress: true // 服务器返回浏览器的时候是否启动gzip压缩
  }
}

复制代码

vue-cli几个重要路径

assetsRoot:构建输出目录 也就是构建后的东西都扔这里
assetsSubDirectory:资源子目录(static) 除了index.html,其余的js img css都分在这里
assetsPublicPath:项目目录 一个杠杠(/) 啥意思呢,是根目录的意思
复制代码

未完待续: 接下来我会基于vue-cli去从新搭建一个工程,单页,多页都会有哦!!!让你看懂vue-cli,并且能够自定义开发环境!!!

关注下面的标签,发现更多相似文章
评论