webpack.config.js详细配置

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
//             }
//         }
    },
    
}

 

webpack.config.js详细配置

上一篇:python中非常好用的数据库管理工具


下一篇:web.xml 3.1头