webpack4学习（1），基础配置

五大模块

• entry
• output
• module
• plugin
• mode

// npm i webpack webpack-cli
const { resolve } = require('path');
module.exports={
    entry:['./src/index.js'],
    output:{
    	filename:'bundle.js',
        path:resolve(__dirname,'dist')
    },
    module:{
    	rules:[]
    },
    plugins:[],
    mode:'development' //production
}

解析文件分类

样式文件、js、html、图片

样式

• 解析css、less

// npm i style-loader css-loader less less-loader
module.exports={
    module:{
    	rules:[
            {
            	test:/\.css$/,
                use:[ //loader倒序执行
                  'style-loader', //创建style标签，将js中的样式资源插入到head中
                  'css-loader' //将css文件变成commonjs模块加载到js中，里面是样式字符串
                ]
            },
            {
            	test:/\.less$/,
                use:[
                  'style-loader', 
                  'css-loader', 
                  'less-loader' //将less文件编译成csss文件，还需安装less包
                ]
            }
        ]
    },
}

• 样式兼容postcss

module.exports={
	//npm i postcss-loader postcss-preset-env（插件）
    module:{
    	rules:[
            {
            	test:/\.css$/,
                use:[ //loader倒序执行
                  'style-loader', //创建style标签，将js中的样式资源插入到head中
                  {
                     loader:'postcss-loader',
                     options:{
                     	ident:'postcss',
                        /*
                          postcss-preset-env帮助postcss读取package.json中browserslist的配置
                          browserslist浏览器的指定兼容性配置
                        */
                        plugins:()=>[require('postcss-preset-env')()]
                     }
                  },
                  'css-loader' //将css文件变成commonjs模块加载到js中，里面是样式字符串
                ]
            }
        ]
    },
}

package.json

{
  "browserslist":{
      /*
      开发环境：->设置node环境变量
      设置node环境变量
      webpack.config.js process.env.NODE_ENV = 'development';
      */
      "development":[
        "last 1 chrome version" //兼容最近的一个浏览器版本
        "last 1 firefox version"
      ],
      // 默认生产环境
      "production":[
        ">0.2%", //大于99.8浏览器
        "not dead", //不兼容已死的浏览器
        "not op_mini all" //不兼容欧朋
      ]
    }
}

• 提取css为单独文件 插件mini-css-extract-plugin

// npm i mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
    module:{
    	rules:[
            {
            	test:/\.css$/,
                use:[
                   {
                   /*
                     这个loader将取代style-loader，提取js中的css文件,
                     开发配置需要使用style-loader配置devServer hot实现样式热更新
                   */
                     loader: MiniCssExtractPlugin.loader, 
                    // 修改loader的默认配置
                     options: {
                       // 对页面引入资源的路径做对应的补全
                       publicPath: '../',
                     },
                  },
                  {
                     loader:'postcss-loader',
                     options:{
                     	ident:'postcss',
                        plugins:()=>[require('postcss-preset-env')()]
                     }
                  },
                  'css-loader'
                ]
            }
        ]
    },
    plugins:[
      new MiniCssExtractPlugin({
        // 文件重命名
        filename: 'css/main.css',
      })
    ]
}

js

webpack本身可以处理js文件,需要做的是兼容性处理

• 基础兼容性

// 需安装的包 npm i babel-loader @babel/core @babel/preset-env
module.exports={
    module:{
    	rules:[
            {
            	test:/\.js$/,
                loader:'babel-loader',
                options:{
                  exclude:/node_modules/,
                 // 所需要兼容的浏览器package.json browserslist
                // 预设：指示babel做怎样的兼容处理
                  presets:["@babel/preset-env"]
                }
            }
        ]
    },
}

• 浏览器并不支持的原生API的代码兼容性处理
  • 方法一

    //需安装的包 npm i @babel/polyfill
    只需在公共的js页面引入 babel/polyfill
    import 'babel/polyfill'
    缺点全部的兼容方法都会被引入，会增加文件体积
    

  • 方法二 按需导入

    // 需安装 npm i core-js
    module.exports={
        module:{
            rules:[
                {
                    test:/\.js$/,
                    loader:'babel-loader',
                    options:{
                      exclude:/node_modules/,
                      presets:[
                      [
                      "@babel/preset-env",
                       {
                         useBuiltIns:'usage', //按需加载
                         corejs:{version:3}, //指定core-js的版本
                         targets：{ //指定浏览器兼容的版本
                           chrome:'60',
                           firefox:'60',
                           ie:'9'
                         }
                       }
                       ]
                      ]
                    }
                }
            ]
        },
    }
    

• 压缩css

// npm i optimize-css-assets-webpack-plugin
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
  pliguns:[new OptimizeCssAssetsWebpackPlugin()]
}

html模板

// npm i html-webpack-plugin
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
  plugins:[
    new htmlWebpackPlugin({
       // 复制模板文件，创建html并自动引入输出的文件
      tempalte:'./index.html',
      //压缩代码
      minfy:{
        collapseWhitespace:true,//移除空格
        removeComments:true,//移除注释
      }
    })
  ]
}

图片

// npm i url-loader file-loader
module.exports={
  module:{
    rules:[
      {
        test:/\.(jpg|png|gif)$/,
        //url-loader依赖file-loader
        loader:'url-loader',
        options:{
          /*
           图片小于8kb，转base64合在js中
           优点：减少请求数
           缺点：图片体积变大，文件请求速度变慢
          */
          limit: 8*1024,
          //重名
          name:'[hash:10].[ext]',
          //输出路径
          outputPath:'imags'
        }
      }
    ]
  }
}

devSearver

/*
 npm i webpack-dev-server
 构建后在内存中
 启用 npx webpack-dev-server
*/
module.exports={
  devServer:{
    // 项目构建后路径
    constBase:resolve(__dirname,'dist'),
    port:3030,
    // 开启压缩
    compress:true,
    //自动打开浏览器
    open:true,
    /*
      开启HMR功能（热更新）
      样式文件 style-loader实现HMR
      js文件默认不使用HMR
    */
    hot:true
  }
}