十天 webpack

1. webpack 安装

-安装本地的webpack
-webpack webpack-cli -D （项目上线时不需要）
1.初始化项目目录： yarn init -y

2. 安装 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。想要开启该功能进行如下设置