webpack基本配置

1.处理js语法及校验

@babel/core(核心包)
@babel/preset-env转化高级语法)
@babel/plugin-proposal-decoreators(转化es7语法)
@babel/plugin-proposal-class-properties(处理class的语法)
@babel/runtime(用在生产环境)
@babel/plugin-reansform-runtime(优化regeneratorRuntime转化更高语法,不能处理inchudes('foo'),用@babel/polyfill【用于生产环境】)

2.全局变量引入问题
方法一：不会暴露window
import $ from 'jquery'
方法二：全局暴露(window)

import $ from 'expoes-loader?$?jquery'()
{
  test: require.resolve('jquery')
  use: 'expose-loader?$'
}

方法三： 在每个模块中注入$元素

new wepack.ProvedePlugin({
  $: 'jquery'
})
引入不打包
externals: {
  jquery: '$'
}

loader处理的指定目录：outputPath: ''
loader处理的指定域名：publicPath: ''

3.css抽离优化
const MiniCssExtractPlugin = require('min-css-extract-plugin')

4.css,js,html压缩优化

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
optimization: { // 优先项
  splitChunks:{ //分割代码块
    cacheGroups: { //缓存组
      common: { // 公共的模块
        chunks: 'initial', //从哪里开始
        minSize: 0, // 文件大于0
        minChunks: 2 //用了2次
      },
      vendor: { // 抽离第三方插件
        priority: 1, // 优先权重
        test:/node_modules/,
        chunks: 'initial', //从哪里开始
        minSize: 0, // 文件大于0
        minChunks: 2 //用了2次
      }
    }
  },
  minimizer: {
    new TerserWebpackPlugin({ //js压缩优化
      cache: true,
      parallel: true,
      sourceMap: true,
      terserOptionns: {
        compress: {
          drop_console: true,
          duop_debugger: true
        }
      }
    }),
    new OptimizeCssAssetsPlugin() //css压缩优化
  }
}
plugins: [//数组，放着所有的webpack插件
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css'
  }),
    new HtmlWebpackPlugin(
        template:'./src/index.html',
        filename:'index.html',
        minify:{
            removeAttributeQutes:ture,//去除双引号
            collapseWhitespace:true,//压缩为一行
        },
        hash:true,在文件后面会加上?adsa4d58wa9da45dsa的哈希值
    )    
]

　　

5.打包多页应用

6.配置source-map
devtool:'source-map' //源码映射，会单独生成一个sourcemap文件 出错了会标识是，提示报错的行和列
devtool:'eval-source-map' //不会单独生成一个sourcemap文件，但是可以显示行与列
devtool:'cheap-source-map' //会单独生成一个sourcemap文件，不会产生列，产生 后你可以保留下来
devtool:'cheap-module-eval-source-map' //不会单独生成一个sourcemap文件，集成在打包后的文件中，不会产生列

7.watch监听的用法

watch: true, //默认不开启
watchOptions: { //监听的选项
  poll：1000， // 每秒 问我1000次
  aggregateTimeout:  500, // 防抖 我停止输入代码500毫秒后更新
  ignored: /node_modules/ // 不需要监听的
}

　　

8.webpack的小插件y
clean-webapck-plugin: 打包前删除旧的打包目录
用法：new CleanWebpackPlugin('./dist')

npm install clean-webpack-plugin -D
const CleanWebpackPlugin = require('clean-webpack-plugin')
new CleanWebpackPlugin({'./dist'})

copy-webpack-plugin: 复制打包对象
用法：

npm install copy-webpack-plugin -D
const CopyWebpackPlugin = require('copy-webpack-plugin')
new CopyWebpackPlugin([
  {from: './doc', to: './'}
])

　　

BannerPlugin: // 版权著作
用法：new webpack.BannerPlugin('copyirght')

9.webpack跨域问题

devServer: {
  //代理：
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:3333',
      pathRewrite: {
        'api': ''
      }
    }
  }
  //模拟数据
  before(app){
    app.get('/user',(req,res)=>{
      res.json({name:'123'})
    })
  }
}

　　

有服务端，不用代理来处理

const express =require('express')
const app = express()
const wepack = require('webpack')

//中间件
const middle = require('webpack-dev-middleware')
const compiler = webpack(config)

app.use(middle(compiler))

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

app.get('/user',(req,res)=>{
  res.json({name:'123'})
})
app.listen(3333)

　　

10.resolve属性的配置

resolve: {第三方
  modules:[
    path.resolve('node_modules'), //指定地方查找
  ],
  extensions:['.js','.css','.vue'], //优化查找后缀名
  mainFields: ['style','main'], // 优先查找目录
  mainFiles: ['index.js'], // 优先查找目录
  alias: { //别名
    'vue': path.resolve(__dirname, './node_modules/vue/dist/vue.esm.js')
  }
}

11.第三方优化配置

noParse: /jquery/, //不解析jquery中的依赖库
plugins: [
  new webpack.IgnorePlugin(/./locale/, /moment/), // 引入moment包，但忽略locale文件夹
]

　　

12.动态连接库
创建一个单独的webpack文件

entry: {
  vue: ['vue'],
}
output: {
  filename: '_dll_[name].js',
  path: path.resolve(__dirname,'dist'),
  library: '_dll_[name]', // 命名
  libratyTarget: 'var' // 命名类型 commonjs|var|this
}
plugins: [
  new webpack.dllPlugin({
    name: '_dll_[name]',
    path: path.resolve(__dirname,'dist','manifest.json')
  })
]
然后template.html引入_dll_vue.js
在webpack.config.js加入
plugins: [
  new webpack.dllReferencePlugin(
    manifest: path.resolve(__dirname, 'dist', 'manifest.json')
  )
]

　　

13.webpack多线程打包（happpack）

const Happypack = require('happypack')
module:{
  rules: [
    {
      test: /.css$/,
      use: 'Happypack/loader?id=css'
      }
  ]
}
plugins: [
  new Happypack({
    id: 'css',
    use: ['style-loader','css-loader']
  })
]

　　

14.懒加载,热更新(@babel/plugin-syntax-dynamic-import)

懒加载：@babel/plugin-syntax-dynamic-import
热更新：devServer:{hot: true}
new webpack.NamedModulesPlugin()
new webpack.HotdModuleReplacementPlugin()