webpack插件

webpack插件

• 本地服务：webpack-dev-server
  • devServer:{//开发服务配置
    port:'3000',
    progress:true, //进度条
    contentBase:'./dist'//作为静态服务目录
}
• html先关操作的插件：html-webpack-plugin
  • new HtmlWepPackPlugin({
    template:'./src/index.html',//模板是哪一个
    filename:"index.html",//打包后的名字
    minify:{
        collapseWhitespace :true,//删除空格
        removeAttributeQuotes:true, //删除双引号
     },
    hash:true
})
• mini-css-extract-plugin将css抽离城单独一个文件
  
• 编译类似Class方法 @babel/plugin-proposal-class-properties
• cleanWebpackPlugin 删除插件
  • 每次打包前先删除文件夹
    new CleanWebpackPlugin({'./dist'})
• copyWebpackPlugin 拷贝插件
  • 将某些文件复制进某个文件内
    new CopyWebpackPlugin([
    {from:"doc",to:"./"}
])
• bannerplugin 内置
  • 版权设置 （在js文件前加上）
    new webpack.BannerPlugin('by MR.zhao')
• 全局变量
  new webpack.DefinePlugin({
    DEV:JSON.stringify('dev')
})
• webpack 两套配置 使用webpack-merge插件合并
  • webpack-dev.js webpack-product.js webpack.base.js
  • 最后使用webpack-merge合并
    例如：在生产环境如下：
    let {smart} =require('webpack-merge')
let base =require('webpack.base.js')
modules.exports=smart(base,{
    mode:""
)

• loader

  • cssloader
    
• **css加前缀 **
  postcss-loader autoprefixer
• **es6 => es5 **
  babel-loader原文件进行转化 @babel/core核心模块 @babel/preset-env转化模块
  

• 优化项

  压缩js

引入第三方模块

• expose-loader 内联
  写法： import $ from 'expose-loader ? $ ! jquery'
  在全局上暴露$代表jquery
  或者：
  loader类型：pre loader、normal loader、 post loader、内联loader

• 在每个模块注入一个$ 在每个模块都可以引用
  new Webpack.ProvidePlugin({
    $:jquery
})
  externals某个模块不需要打包

  • 引入不打包
    externals:{
    jquery:$
}

• 处理img
  file-loader css里的图片、html-withimg-loader html中的图片进行打包、url-loader小图片用base64
{
    test:/\.(png|jpg)/,
    use:{
        loader:"url-loader"
        options:{
            limit:200*1024 //小于这个的进行base64处理（不用进行http请求、但是要大于原图片的1/3）
            outputPath:"/img" //放在某个文件夹下
        }
    }
}

• 为所有的请求地址加上路径
  

• 多入口文件
  
  chunks里边确定放那个模块：

• 打包后的代码出错 进行调试

  • source-map
    • 源码映射 会单独生成一个sourcemap文件 出错了我 会标识当前报错的列和行 大而全
      devtool:"source-map"
  • eval-source-map
    • 不会产生单独的文件 但可以显示行和列
      devtool:"eval-source-map"
  • cheap-module-source-map
    • 不会产生列 但是是一个单独的映射文件 产生后可以保存
  • cheap-module-eval-source-map
    • 不会产生文件，集成在打包后文件中 不会产生行和列

• 监控 实时打包编译
  watch:true,
watchOptions:{//监控的选项
      poll:1000,//每秒巡查1000次
    aggreatement:500,//防抖 编写完成500毫秒后在开始打包
    ignored:/node_modules/ //不需要进行监控的文件
}

• 跨域

  • 代理 http-proxy
    devServer:{重写请求地址 将请求地址代理过去
        proxy:{
        "/api:{
            target:"http://",目标地址
                pathRewrite:{‘/api’,""}重写地址 将api去掉
            }
    }
}
  • 前端自己模拟数据
    devServer:{
    before(app){
        app.get('/user',(req,res)=>{
            res.json(要返回的数据)
    })
}
  • 有服务端 不想用代理 能不能在服务端中启动webpack 端口用服务端端口

• resolve 解析 第三方包

  • extensions文件查找顺序

• 不解析
  {
    noParse: /jquery/
}