webpack深入浅出

基本的配置:

const {resolve}=require('path');
const MiniCssExtratPlugin=require('mini-css-extrat-plugin');
const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
const HtmlWepackPlugin=require('html-webpack=plugin')


//定义nodejs环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV='production'


const commonCssLoader=[
  // style-loader, //在js文件中创建style标签
  MiniCssExtratPlugin.loder,  //创建一个单独的css文件，link的方式引入
  css-loader, 
  {
    //还需要在package.json中定义browerlist
     loader:'postcss-loader', //css兼容性浏览器
     option:{
      ident:'postcss',
         plugins:()=>{
         require('postcss-preset-env')() //按照这个标准去兼容
       }
     }
  }
]


module.export={
  entry:'./src/js/index.js',   //入口
  output:{
    filename:'js/built.js',   //打包输出名称
    path:resolve(__dirname,'build') //打包输出存放路径
  },
  module:{  
    rules:[
      {
        test:/\.css$/,
        use:[...commonCssLoader]
      
      },
      {
        test:/\.less$/,
        use:[...commonCssLoader,less-loder  //把less文件变为css文件] 
      },
      {
        //在package.json中eslintConfig-->airbnb
        test:/\.js$/,
        exclude:/node_moldules/,
        loader:'eslint-loader',  //检查js的代码，
        enforce：‘pre’, //优先执行当前loader
        options:{
          fixed:true //检查完有问题自动修复
        }
      },
      {
        test:/\.js$/,
        exclude:/node_moldules/,
        loader:'babel-loader', //js兼容性处理
        options:{
           presets:[
             '@babel-preset-env',
             {
                useBuiltIns:'usage',//按需加载
                corejs:{version:3}, corejs 按需加载
                targets:{chrome:'60'}
             }
           ]
        }
      },
      {
        test:/\.(gif|png|jpg)$/, //处理css的图片的问题
        use:url-loader,
        option:{
          limit：8*1024，
          name:'[hash:10].[ext]',
          outputPath:'imgs',
          esMoules:false  //html-loader解析用commmonjs,所以要关掉es6
        }
      },
      {
        test:/\.html$/,
        loader:'html-loader' //处理HTML中的图片问题  使用的是commonjs
      },
      {
         exclude:/.\(js|css|less|html|jpg|png|gif)/,
         loader:file-loader,
         option:{
            outputPath:'media'
         }
      }
      
    ]
  },
  plugins:[
    new MiniCssExtratPlugin({
      filename:'css/built.css' //输出css的名称
    }),
    new OptimizeCssAssetsWebpackPlugin  //压缩css
    new HtmlWepackPlugin({
      template:'./src/index.html'  //以html为模板创建新的html
      collapseWhitespace：true,//压缩空格
      removeComments:true //去除注释
    })
  ],
  mode:'production'  //自动压缩
  devServer:{//开发环境用--devServer 解决开发环境的自动编译和自动打开浏览器
    contentBase:resolve(__dirname,'build'),
    compress:true,//最佳压缩
    port:3000,
    open:true,
    hot:true//开启HMR功能
  }
}

webpack性能优化

开发环境性能优化：优化打包构建速度；优化调试功能；

生产环境性能优化：优化打包构建速度；优化代码运行性能；

开发环境优化：

HMR：hot module replacement (热模块替换/模块热替换)-->针对非入口文件  devServe{hot:true}

作用：一个模块发生变化，只会打包这个一个模块，不是打包所有模块，极大提升构建速度。

css文件：可以使用HMR，因为style-loader内部实现了

html文件：默认不可以使用HMR(不需要HMR），同时还会导致HTML文件不可以热更新

解决：修改entry入口，将html文件引入
entry:['./src/js/index.js', './src/index.html']

js文件：默认不可以使用HMR--->需要修改js代码，添加支持HMR功能的代码

if(moudle.hot){ //一旦为true,说明开启了HMR功能，让HMP代码生效
  moudle.hot.accept('./print.js',function(){
     //方法会监听print.js的变化，一旦发生变化，其他默认不会重新打包构建
     //只会执行函数里面的内容
  })
}

source-map：一种 提供源代码到构建后代码映射技术，如果构建代码出错了，通过映射可以追踪源代码出错的地方。

devtool:'source-map'

开发环境：eval-source-cheap /eval-cheap-source-cheap
速度快的：eval
调试友好：cheap-source-cheap  

开发环境：source-cheap、cheap-module-source-cheap  （隐藏和友好）