webpack常用配置

初始配置

配置:
- webpack
- webpack-cli

使用:
const path = require('path');

module.exports = {
  mode: 'development',  //模式
  entry: './index.js',	//入口
  output: {
    path: path.resolve(__dirname, 'dist'), //输出文件
    filename: 'bundle.js',  //输出js文件名字
  },
};

生成html文件和压缩html

配置:
- html-webpack-plugin

使用:
//导入html-webpack-plugin插件,将打包的js,css文件夹引入index.html
const htmlWebpackPlugin = require('html-webpack-plugin');

//webpack5 mode:'production'自带压缩html和js
module.exports ={
    plugins:[
        new htmlWebpackPlugin({
            //[生成html]
            // 指定打包的文件名
            filename: 'main.html',
            //模板html文件 
            template:'./tem.html',
	  
	    //[压缩]
            minify: {
                //压缩html代码,溢出空格,webpack<5
                collapseWhitespace:true,
                //移除注释
                removeComments:true
            }
        }),
    ]
  }
};

打包样式文件

css->页面style标签

配置:
- style-loader:将js中的css代码插入到页面中
- css-loader: 将js中引入的css文件插入到js文件中

使用:
module.exports ={
  module:{
    {
    test:/\.css$/i,
    use:['style-loader','css-loader']
    },
  }
};

css->单个文件

配置:
- mini-css-extract-plugin 将js中css文件导入到单个文件中
- css-loader: 将js中引入的css文件插入到js文件中

使用:
//将css打包到一个文件夹
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports ={
  module:{
    {
    test:/\.css$/i,
    use:[MiniCssExtractPlugin.loader,'css-loader']
    },
  }
};
  plugins:[
      // 处理css文件,将css导入的一个文件
      new MiniCssExtractPlugin({
          filename:'css/main.css'
      }),
  ]
}

less->页面style标签

配置:
- less-loader 将less文件转换成css文件
- style-loader:将js中的css代码插入到页面中
- css-loader: 将js中引入的css文件插入到js文件中

使用:
module.exports ={
  module:{
     //使用less-loader将less文件转换成css文件,后面一样
    {
        test:/\.less/,
        use:['style-loader','css-loader','less-loader']
    },
  }
};

压缩css文件

配置:
- css-minimizer-webpack-plugin

使用:
//css压缩
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
module.exports ={
  module:{
     //压缩css
     new CssMinimizerWebpackPlugin()
  }
};

css兼容性

• package.json

  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

• webpack.config.js

配置:
- postcss
- postcss-loader
- postcss-preset-env

使用:
//配置nodejs的环境变量,默认为production
process.env.NODE_ENV = 'development';

打包js文件

压缩js

配置:
- 使用webpack自带功能

使用:
module.exports ={
  mode:'production',
};

eslint

配置:
- eslint
- eslint-config-airbnb-base
- eslint-plugin-import
- eslint-webpack-plugin

// 全局安装eslint
//使用eslint 文件.js 检查
//使用eslint 文件.js --fix修复 

// .eslintrc.js
module.exports = {
	root: true,
	env: {
		node: true,
		browser: true,
		es6: true
	},
	extends: "airbnb-base",
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
	}
};

// webpack.config.js
使用:
module.exports ={
  plugins:[
    new ESLintWebpackPlugin({
        fix:true //自动修复
    })
  ]
}

js兼容性处理

配置:
- babel-loader
- @babel/core
- @babel/preset-env
- core-js

使用:
module.exports ={
  module:{
        { 
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
             presets: [
                    [
                        '@babel/preset-env',
                        {
                            //按需加载
                            useBuiltIns:'usage',
                            //指定core-js版本
                            corejs:{
                                version:3
                            },
                            //指定兼容性做到哪个版本浏览器
                            targets:{
                                chrome:'60',
                                firefox:'60',
                                ie:'9',
                                safari:'10',
                                edge:'17'
                            }
                        }
                    ]
                ]
            }
        }
    }
  }
}

打包图片资源

配置: 
- 使用webpack自带的asset

使用:

//webpack5资源文件夹打包 文件夹输出
assetModuleFilename: 'images/[hash:5][ext][query]'

module.exports ={
  module:{
    //  webpack5使用图片方法
    //   resource->原file-loader
    //    inline->原url-loader
    //    source ->原raw-loader
    {
        test:/\.png$/,
        type:'asset/resource',
	//单独文件名字
        generator: {
            filename: 'static/[hash:5][ext][query]'
        }
    },
  }
};

打包其他资源

配置:
- 使用webpack5自带的asset

使用:
//webpack5资源文件夹打包 文件夹输出
assetModuleFilename: 'images/[hash:5][ext][query]'

module.exports ={
  module:{
    //打包其他资源
    {
        //排除其他资源
        exclude:/\.(html|css|js|png)$/,
        type:'asset/resource',
    
        自定义输出文件
         generator: {
             filename:'[hash:5].[ext]' 
         },
    }
  }
};

生成服务器

配置:
- webpack-dev-server

使用:
module.exports ={
    //添加这个css可以热更新
    target: "web",
    //添加这个html可以热更新,不需要HMR,第二个参数为html模板
    entry:['./index.js','./tem.html'],
    ... ...
    devServer:{
        //监听目录,默认监听index.html
        static: {
           directory: path.resolve(__dirname, 'dist'),
        },
        compress:true,
        port:8888,  //端口号
	//HMR 热模块替换/模块热替换 一个模块发生变化，只会重新打包这一个模块而不是打包所有模块
        hot: true,  // html文件修改不能热更新,js不支持HMR
        open: true, // 自定打开浏览器

        //使用指令 npx webpack serve
    }
};

// index.js 入口文件修改重新加载所有文件
if (module.hot)
  //一旦module.hot为true,说明开启了HMR功能。-->让HMR功能代码生效
  module.hot.accept('./print.js',function(){
  //方法会监听print.js文件的变化，一旦发生变化，其他模块不会重新打包构建。
  //会执行后面的回调函数
})