webpack笔记

安装webpack：npm install webpack webpack-cli -D(-D与--save-dev一样)

打包：webpack --mode development-----开发模式

打包：webpack --mode production-----运行模式（上线）

指定打包输出位置：webpack ./src/indx.js -o ./build/ --mode production----将src下的index.js打包输出到build目录下

简洁方式：在根目录下创建一个webpack的配置文件--->webpack.config.js
    配置文件里面可以配置---->
    const {resolve}=require('path');//nodejs获取当前路径
    module.export={
            entry:'./src/index.js', //入口文件
            output:{
                        //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径 
                        path:resolve(__dirname,'build'), //输出位置
                        filename:'main.js' //输入文件
                 },
            module:{
                    rules:[]//处理其他资源
            },  
            plugins:[],//插件
            mode:'development'//开发模式--production（运行模式）
    }
    配置完成后：我们只需输入命令：webpack，就自动根据命令进行打包
    多入口文件：
        方式①：entry:["./src/a.js","./src.b.js"]
        方式②：entry:{
                two:"./src/two.js",
                one:"./src/one.js"        
            }
            ----> output:{
                           path:resolve(__dirname,'build'), //输出位置
                            filename:'[name].js' //输入文件,[name]指定为entry中的two.js和one.js
                     },

打包html文件：---->在webpack.config.js中配置----自动将js引入到html中
下载插件：npm i html-webpack-plugin -D
引入插件：const HtmlWebpackPlugin=require('html-webpack-plugin');
使用插件：
plugins:[
    new HtmlWebpackPlugin({
    template:"./scr/index.html",//使用模板
    filename:"demo.html",//重命名
    //压缩html文件
    minify:{
        collapseWhitespace:true,//移除空格
        removeComments:true,//移除注释
    }
    chunks:["a.js","b.js"],//规定引入需要的js文件
    }),
]

打包css文件：---->在webpack.config.js中配置
下载：npm i css-loader style-loader -D
配置：
    module:{
            //处理其他资源
                    rules:[{
                test:/\.css$/,
                use:['style-loader','css-loader']
                }]
            },

在入口文件(js文件)中引入css:    require('a.css')  

开发服务器的使用：devServer-----可以自动编译（浏览器热加载一样）
安装下载：npm i webpack-dev-server -D
在webpack.config.js中配置一个：target:"web"------->自动打开浏览器---->自动刷新
运行webpack serve就可以启动服务
改端口号（默认8080）webpack serve --port 端口号
----->HMR模块热替换--->webpack.config.js---->devServer{
                        port:3000,
                        compress:true,
                        open:true,
                        hot:true,//模块热替换
                        }