webpack初步认识，使用

webpack初识

项目打包代码使用的工具

一：webpack打包需要使用的那些

webpack

（webpack大部分用于单页应用的打包，只有一个html文件）

打包工具，在package.json里面可以创建命令来使用webpack，或直接在cmd使用webpack命令。或创建自己的命令，npm run …命令。一般使用npm命令，为bulid，构建，打包。就会生成一个dist目录，所有打包的文件，都会在dist文件夹里面（会生成一个main.js）

webpack-cli

脚手架

在调用webpack的时候，是调用的脚手架。

两种开发模式

一：SPA，single page application 单页引用，只有一个html文件

二：MPA，multi page application 多页引用（最多的方式，使用小程序的思想去解决多页引用）

暴露文件

在项目文件中，新建public文件，里面放入index.html文件，暴露入口文件

webpack-dev-server

创建一个服务，使用npm命令，创建一个服务，一般为start

创建配置文件

在创建一个服务的时候，需要创建配置文件的时候。在项目的目录下，文件名，webpack.config.js

配置项目文件

module.exports = {
    entry:{ //入口文件
        
    }
    module:{
        rules:{  //解析器，解析js和css等其他文件
            
        }
    }
    plugins: [    //插件  html文档插件
        new HtmlPlugin({
            template: "public/index.html",
            filename: "main.html"
        })
    ],
	devServer: {   //开启一个服务
        port: 9001,
        open: true,
        openPage: 'main.html',
        proxy: {   //服务器代理
            '/apis': {  
                tartget: "http://www.shuiyue.info:9000",
                pathRewrite: { "/apis": "" }
            }
        }
    }
}

项目中的使用

一般都是webpack一次配置终身使用，后面在大大小小的删改一些。所以大家在项目中使用的时候，不用担心，配置一次就好了