webpack和gulp打包工具

1.打包工具：webpack和gulp两个打包工具
webpack：对项目里面资源进行打包，不仅可以对模块化写法的js进行打包，还可以对css以及图片，连着各种文件的依赖关系进行打包。也可以生成静态资源，在打包的工程必须配合各种loader进行资源的解析，也可以搭建本地服务器，配置代理服务器，设置热更等操作，也可以实现多页面配置，分割css公共样式等功能。项目开发完之后必须先打包再进行部署。
2 需要安装的工具
npm install webpack webpack-cli -g

打包过程：
1 创建文件 使用npm init -y初始化项目。
2 npm install webpack webpack-cli -s 把webpack装到当前项目依赖文件里面
3 创建src文件夹 以后文件存放的是要打包的资源文件，以后项目开发的文件
4 手动创建打包配置文件webpack.config.js
5 创建index.js 做为打包的入口文件
6 设置打包入口文件字段
 entry:{
        //属性 打包的入口文件名
        // 属性值 打包的文件路径
        index:"./src/index.js"
    },

7 设置打包的出口配置字段
output:{
        filename:"[name]-bundle.js", //打包之后资源的名称index-bundle.js,
        path:path.resolve(__dirname,"dist") //打包之后的文件路径，在当前文件夹下dist文件
        // __dirname 当前文件夹路径
    },

8 配置打包环境
mode:"development",
9 配置打包环境的插件
//   4.1 生成index.html页面的一个插件
    //   4.2 提取公共样式的插件
    //   4.3 可以对资源进行压缩配置
    plugins:[
        // 生成静态页面的插件 html-webpack-plugin
        // 插件安装可以安装在开发环境下 npm install html-webpack-plugin -d
        new HtmlWebpackPlugin({
            title:"打包的项目演示"
        }),
        // 把css打包成隔离的样式 通过link标签进行引入的
        // npm install mini-css-extract-plugin -d
        new miniCssExtractPlugin({
            filename:"css/[name].css",
        })
    ],
10 配置打包过程中资源解析器
// 例如css 需要style-loader 和css-loader 两个解析器
    // 图片 需要url-loader进行解析
    module: // 在进行打包的时候需要使用的第三方模块
        {
            rules:[ //添加资源和解析器对应的对象
                {
                    // 类似于正则表达式的test方法，
                    test:/\.css$/i, //匹配后缀名为css资源 不区分大小写
                    exclude:/node_modules/, //exclude:不包含，查找css文件时候不从node_modules这个文件进行查找
                    // use:['style-loader','css-loader'] //使用对应解析器loader解析
                    // npm install style-loader css-loader -s

                   use:[miniCssExtractPlugin.loader,'css-loader'] //使用css样式隔离插件解析对应资源
                },
                {
                    test:/\.(png|jpg|jpeg|gif|svg)$/i,
                    use:["url-loader"]
                    // npm install url-loader -s
                }
            ]
        },
11 本地服务器的配置
devServer:{
            host:"localhost",
            port:"9000",
            open:true,
            // 指定文件夹的地址
            static:{
                directory:path.join(__dirname,"dist")
            },
            hot:true, //设置热更
            proxy:{
                "/api":{
                    target:"http://9527.com",
                    changeOrigin:true,
                    pathRewrite:{
                        "^/api":""
                    }
                }
            }
        }