webpack配置 入口和输出的配置 插件配置

webpack配置

官方网站https://webpack.docschina.org/concepts/

webpack.config.js 是 webpack的配置文件
我们主要在这个文件中配置
入口(entry)
输出(ouput)
插件(plugins)
加载器(loader)

一.添加入口和输出的配置

1. entry:配置入口，指定需要打包转换的资源
2. output:配置打包存储的目录及文件名称

二.webpack中入口和输出的配置plugins

webpack-dev-server插件

1. 作用:

1. 进行资源的托管
2. 在修改源代码的时候页面实现自动刷新(热重载)
3. 通过配置可以自动打开浏览器

2. 下载包：

npm i webpack-dev-server@3.11.0 -D

3. 添加配置:

在webpack.config.js中添加配置(不添加也不会影响使用)

//derServer节点是 webpack-dev-server 的配置项
devServer: {
    open: true,// 设置 自动打开浏览器
    host:'127.0.0.1', //修改主机名
    port: 8080,//自定义端口
},

4. 使用:

1. 修改package.json -> scripts 中的 dev 命令如下

  "scripts": {
    "dev": "webpack serve"
  },

2. 重新进行项目的打包
   - 运行npm run dev 命令，
   - 全局安装webpack 可直接运行webpack serve指令
3. 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

5. 实现原理:

1. 创建一个内存服务器，将打包转换后的资源托管在这个服务器
2. 监听代码的更新，会自动的解析转换并托管，并通知浏览器进行页面的刷新

打包生成的文件哪儿去了

① 不配置webpack-dev-server的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
严格遵守开发者在 webpack.config.js 中指定配置
根据 output 节点指定路径进行存放

② 配置了webpack-dev-server 之后，打包生成的文件存放到了内存中
不再根据 output 节点指定的路径存放到实际的物理磁盘上，而是托管到内存服务器中
提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

访问托管到内存中的文件

webpack-dev-server生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的，但是我们也可以访问到
可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
例如 /main.js 就表示要访问 webpack-dev-server 生成到内存中的 main.js 文件

html-webpack=plugin插件

1. 作用：

1. 使用HtmlWebpackPlugin插件 自动引入打包后的资源文件到html文件(例如，我们不再需要手动引入打包好的js文件了)
2. 如果没有指定默认的模板文件，这个插件可以帮助我们自动的生成一个模板文件，并实现资源的自动的引入

2. 下载包:

npm i --save-dev html-webpack-plugin@4.5.0

3. 使用:

1. 在webpack.config.js中引入插件并设置基本配置
2. 在webpack.config.js中添加插件的配置(添加到module.exports中)

 // 添加插件配置   记得这个配置项 名字是 plugins (记得加s)
const HtmlPlugin = require('html-webpack-plugin')

-------添加到module.exports中--------
 plugins: [
     // 挂载插件
     new HtmlPlugin({
         template: './index.html',  //参照模板 指定要复制的文件
     }),
 ],