1. webpack 安装
-安装本地的webpack
-webpack webpack-cli -D （项目上线时不需要）
1.初始化项目目录： yarn init -y
- 安装
yarn add webpack webpack-cli -D
webpack 可以进行0配置
-打包工具 - > 输出结果（js模块）
-打包（支持我们的js的模块化）
手动配置webpack
1. Webpack DevServer配置
devServer(Object类型)
该配置会被webpack-dev-server使用，并从不同方面做定制。
下面是一个例子，使用gzips提供对dist/文件夹下内容的访问。
devServer: {
contentBase: path.join(__dirname, "dist"),//对外提供的访问内容的路径
compress: true,//是否启用gzip压缩
port: 3000//提供访问的端口
}
当server运行后，在请求时会打印如下内容
http://localhost:9000/
webpack result is served from /build/
content is served from dist/
如果以Node.js API的方式使用dev-server，则devServer中的配置将会被忽略。
需要将设置的options作为第二个参数进行传递new WebpackDevServer(compiler,{...})通过Node.js API进行配置的内容参见此处
devServer.clientLogLevel(String 类型)
当使用inline mode，devTools的命令行中将会显示一些调试信息，
如：before loading，before an error 或 Hot Module Replacement被启用。
这类调试信息，可能会让输出变得比较乱。
可以通过如下设置禁止显示上述的调试信息。
clientLogLevel: "none"
其中的值可以是none,error,warning或info。
如果不设置默认的log level 为info。
注意console一致都会显示bundle error和warning。上面的配置只对log级别低的message有效。
devServer.compress(boolean 类型)
对所有请求启用gzip压缩
compress: true
devServer.contentBase(boolean string array类型)
设置server对外服务的内容来源，只有在提供静态文件访问的情况下才需要使用该配置。
devServer.publicPath会被用来设置提供bundles文件的位置，而且会优先考虑该配置的路径。
默认情况下会使用当前运行命令的文件夹作为内容源，可以使用如下配置对此进行更改。
contentBase: path.join(__dirname, "public")
注意：建议使用绝对路径，不要使用相对路径
可以定义多个文件夹提供数据源。
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]
禁止使用contentBase可以做如下设置
contentBase: false
devServer.filename(String)
该配置可以配置成lazy mode来减少编译，lazy modee模式下默认会在每次请求时，
进行一次编译。使用filename,可以设置当请求某个指定的文件时，才执行编译。
如果output.filename被设置位bundle.js并且filename如下使用,
则仅仅会在请求bundle.js时，进行编译。
lazy: true,
filename:"bundle.js"
如果是设置
filename而不设置lazy mode，则不会有任何效果。
devServer.headers(object)
为所有请求添加headers
headers: {
"X-Custom-Foo": "bar"
}
devServer.historyApiFallback(boolean object)
当使用html5 history api,将会在响应404时返回index.html。想要开启该功能进行如下设置
