webpack.config.js详细配置

Posted 2020-12-09 HLLZ

const { resolve } = require(‘path‘)
const htmlWebpackPlugin = require(‘html-webpack-plugin‘)

/**
 * entry:入口起点
 * 1.string --> ‘./src/index.js‘
 *   打包形成一个chunk,输出一个bundle文件
 *   此时chunk的名称默认是main
 * 2.array -->[‘./src/index.js‘,‘./src/add.js‘]
 *   多入口
 *   所有入口文件最终只会形成一个chunk,输出出去只有一个bundle文件。
 *   一般只有在开发环境下让html文件HMR（热更新）生效
 * 3.object
 *   多入口
 *   有几个入口文件就形成几个chunk,输出几个bundle文件
 *   此时chunk的名称是 key
 * 
 *   -->特殊用法
 *   {
 *   所有入口文件最终只会形成一个chunk,输出出去只有一个bundle文件。
 *   index:[‘./src/index.js‘,‘./src/count.js‘],
 *   形成一个chunk,输出一个bundle文件
 *   add:‘./src/add.js‘
 *   }
 */

module.exports = {
    //1.
    entry:‘./src/index.js‘,
    //2.
    // entry:[‘./src/index.js‘,‘./src/add.js‘],
    //3.
    // entry:{
    //     index:‘./src/index.js‘,
    //     add:‘./src/add.js‘
    // },
    output:{
        filename:‘js/[name].js‘,
        path:resolve(__dirname,‘build‘),
        //所有资源引入公共路径前缀 --> ‘imgs/a.jpg‘ --> ‘/imgs/a.jpg‘,一般用于生产环境
        // publicPath:‘/‘,
        // chunkFilename:‘[name]_chunk.js‘,//非入口chunk名称
        // library:‘[name]‘,//整个库向外暴露的变量名
        // libraryTarget:‘window‘,//变量名添加到哪个上  browser
        // libraryTarget:‘global‘,//变量名添加到哪个上  node
        // libraryTarget:‘commonjs‘//变量名添加到哪个上  browser
    },
    module:{
        rules:[
            {
                test:/.js$/,
                exclude:/node_modules/,
                //只检查src下面的js文件
                include:resolve(__dirname,‘src‘),
                //优先执行
                enforce:‘pre‘, //post延后执行
                loader:‘eslint-loader‘,
                options:{
                    fix:true
                }

            },
            {
                oneOf:[
                    {
                        exclude:/.(css|less|sass|png|gip|jpg|js|html)$/,
                        loader:‘file-loader‘
                    },
                    {
                        test:/.css$/,
                        use:[
                            ‘style-loader‘,
                            ‘css-loader‘
                        ]
                    },
                    {
                        test:/.html$/,
                        loader:‘html-loader‘
                    },
                ]
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin()
    ],
    mode:‘development‘,
    //解析模块的规则
    resolve:{
        //配置解析模块路径别名：优点:简写路径 缺点:路径没有提示
        alias:{
            $css:resolve(__dirname,‘src/css‘)
        }
    },
    //配置省略文件路径的后缀名
    extensions:[‘js‘,‘json‘,‘jsx‘],
    //告诉webpack解析模块是去找哪个目录
    // modules:[resolve(__dirname,‘./node_modules‘),‘node_modules‘]
    devServer:{
        contentBase:resolve(__dirname,‘build‘),
        //监视contentBase 目录下的所有文件，一旦文件变化就会reload
        watchContentBase:true,
        watchOptions:{
            //忽略文件
          ignored:/node_modules/
        },
        //启动gzip压缩
        compress:true,
        //端口号
        port:3000,
        //自动打开浏览器
        open:true,
        //域名
        host:‘localhost‘,
        //热更新
        // hot:true
        //不要显示启动服务器的日志信息
        clientLogLevel:‘none‘,
        //除了一些基本启动信息以外，其他内容都不要显示
        quiet:true,
        //如果出错了不要全屏提示
        overlay:false,
        //服务器代理 -->解决开发环境跨域问题
//         proxy: {
//             ‘/api‘: {
//                 target: ‘http://127.0.0.1:7001‘,
// 　　　　　　　　　pathRewrite:{‘^/api‘ : ‘‘},
//                 changeOrigin: true
//             }
//         }
    },
    
}