webpack开发环境配置

关于webpack5：

通过持久缓存提高构建性能

使用更好的算法和默认值来改善长期缓存

通过更好的树摇和代码生成来改善捆绑包大小

清除处于怪异状态的内部结构

通过引入重大更改来为将来的功能做准备

 

webpack五大核心概念：

Entry
Output
Loader
Plugins
Mode

 

需要安装的依赖：

webpack

webpack-cli

webpack-dev-server

url-loader

style-loader

css-loader

html-loader

file-loader

html-webpack-plugin

 

webpack.config.js：

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build'),
    },
    module:{
        rules:[
            // css
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            // less
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            //img
            {
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit:8*1024,
                    name:'[hash:10].[ext]',
                    esModule:false, //关闭es6Module开启commonjsModule
                }
            },
            // html中img
            {
                test:/\.html$/,
                loader:'html-loader',
                options:{
                    esModule:false, //关闭es6Module开启commonjsModule
                }
            },
            //other
            {
                exclude:/\.(html|js|css|less|jpg|png|gif)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            },
            
        ]
    },
    plugins:[
        //html
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })        
    ],
    mode:'development',
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true,
    }
}