Webpack5学习

安装webpack

npm i webpack webpack-cli -g

devServer的使用

nom i eslint-loader eslint-config-airbnb-base eslint-plugin-import -D

webpack.config.js的配置

const {resolve} = require('path');

/**
* 引入的插件
**/
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    
    /**
     * 1.entry 指示webpack从哪个文件开始打包
     */
     
    //单入口，使用字符串，形成一个chunk
    entry:['./src/index.js', './src/index.html'],

    //多入口,Array格式,形成一个chunk
   	entry:["./src/index.js", "./src/main.js"],

    //多入口,Object格式,形成多个chunk
    entry:{
    	  one:'./src/index.js',
          two:'./src/main.js'
    }
    //特殊用法
    entry:{
      onea:['./src/main.js', './src/index.js'],
      twob:['./src/index.js']
    }

    /**
     * 2.output 指定输出文件路径及名称
     */
    output:{
    	//单入口默认
        filename:'build.js',
        //多入口,Object格式
        filename:"[name].js",
        path:resolve(__dirname, 'build')
    },

    /**
     * 3.loader 打包CSS资源
     *      1)css-loader的作用是处理CSS中的@import和url
     *      2)style-loader的作用是把样式插入到DOM中
     */

    module:{
        rules:[
        
            /*顺序从右到左加载,顺序不可变*/
            {test:/\.css$/, use:[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']},
            {test:/\.less$/, use:[MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', 'postcss-loader']},
            {test:/\.scss$/, use:[MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']},
        	
        	/**
            * 打包其他资源
            **/    
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                loader:'url-loader',
                options:{
                    publicPath: './images/',
                    outputPath:'images/',
                    limit: 1024 * 8,
                    name:'[name][hash:10].[ext]'
                }
            },
            
    		/**
            * 打包HTML引用的其他资源
            **/
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            
            /**
            * 去除无用的JS代码(非第三方)
            **/
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:'eslint-loader',
                options: {
                    fix:true
                }
            }
        ]
    },


    /**
     * 4.plugins对HTML文件进行处理 1)下载 2)引入 3)使用
     *      安装命令：npm i html-webpack-plugin -g
     *      引入插件：const HtmlWebpackPlugin = require('html-webpack-plugin')
     * 	其他插件方法一致
     */
    plugins:[
        //1.默认创建一个空的, 目的就是自动引入包的资源
        //new HtmlWebpackPlugin()

        //2.指定模板
        new HtmlWebpackPlugin(
            {
                template:"./src/index.html",
                filename:"index.html",
                //压缩html文件
                minify:{
                   //移除(html)空格
                    collapseWhitespace:true,
                    //移除注释
                    removeComments:true
                }
            }
        ),

        new MiniCssExtractPlugin(
        
        ),

        new OptimizeCssAssetsWebpackPlugin(
        )
    ]

    
    /**
     * 5.生产模式production 开发模式development
     */
    mode:'development'
	
	/** 自动刷新 **/
	target: 'web'
	
	/** Server配置 cmd优先级高于配置文件**/
    devServer:{
        port: 3000,
        compress: true,
        open: true,
        hot:true
    }
}