webpack的学习知识

webpack 学习

不建议全局安装–使用本地安装

npm install webpack webpack-cli -D

-D 本地使用 --save 线上用

直接运行webpack

npx webpack

绝对路径

相对路径

compress 服务器压缩

• 插件

打包html插件

可以打包出不同的js文件

清除插件

使用
数组或者正则

• 单页 引入多个js 或者说是（多入口）

• 多页面 （多入口多出口）

多页面入口js

html 插件也需要配置多个

一般都是单入口

webpack 热更新

webpack - loder

处理样式

npm install style-loader css-loader node-sass sass-loader -D

抽离样式 – 抽离到css文件 通过css文件的方式引入

统一放在css文件下

css 放到2个文件下

mini-css

只能抽离成一个css文件

开发的时候禁用抽离css 上线的时候在抽离

删除多余css的插件

用在htmlWebapckplugin 下面

查看相关配置–

www.npmjs.com/package/purifycss-webpack

• 自动加前缀

项目使用

const path = require('path')
const { env } = require('process')

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'uat'
const HappyPack = require('happypack')

const timeStamp = new Date().getTime()

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  productionSourceMap: true, // 开启源代码错位位置
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new HappyPack({ // 多线程打包
        loaders: [
          'babel-loader', 'vue-loader', 'url-loader'
        ],
        cache: true,
        threads: 3
      }), new CompressionPlugin({
        filename: '[path][base].gz',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8
      }), new BundleAnalyzerPlugin()
    ],
    devtool: isProduction ? false : 'source-map', // 线上不打包source-map 开启源代码错位位置
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: 'dfdf',
    resolve: {
      alias: {
        '@': resolve('src') // 配置跟看路径为src
      }
    }
    // output: {
    //   filename: `js/[name].${timeStamp}.js`,
    //   chunkFilename: `js/chunk.[id].${timeStamp}.js`
    // }

  },
  // css: {
  //   extract: { // 打包后css文件名称添加时间戳
  //     filename: `css/[name].${timeStamp}.css`,
  //     chunkFilename: `css/chunk.[id].${timeStamp}.css`
  //   }
  // },
  chainWebpack (config) {
    config.module.rule('pug')
      .test(/\.pug$/)
      .use('pug-html-loader')
      .loader('pug-html-loader')
      .end()
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
    config.plugin('html')
      .tap(args => {
        const date = new Date()
        args[0].title = '珍客销售云'
        args[0].createDate = date
        return args
      })

    // config.output.filename = 'js/[name].[contenthash].js'
    // config.output.chunkFilename = 'js/[name].[contenthash].js'
  },
  devServer: {
    port: '8080',
    open: true,
    hot: true,
    disableHostCheck: true,
    clientLogLevel: 'warning',
    overlay: {
      warnings: false,
      errors: true
    }
  }
}

可以的大家点点关注-总结不易谢谢大家-也可以留言需要哪类的我也可以尝试