Webpack基本配置之plugins篇

plugins能够在webpack运行到某一时刻的时候帮你作一些事情，和react、vue中的生命周期函数很像。

HtmlWebpackPlugin

1. 安装

npm install --save-dev html-webpack-plugin
复制代码

2. 功能

会在打包结束后的这一个时刻自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

3. 使用

// 第一步引入html-webpack-plugin
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'  //'src/index.html'设置的模板
    })
  ],
复制代码

CleanWebpackPlugin

1. 安装

npm install --save-dev clean-webpack-plugin
复制代码

2. 功能

会在项目打包以前将指定的打包目录删除

3. 使用

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  plugins: [
    new CleanWebpackPlugin()
  ]
复制代码

sourceMap

sourceMap是一个映射关系，他能够将编译好的文件和源文件对应起来，方便寻找代码的错误提示

1. 使用

devtool: 'soucre-map'
复制代码

2. 不一样的devtool值对应的打包速度和效果不一样，最佳实践是：

• 开发环境下配置

mode: 'development',
devtool: 'cheap-module-eval-source-map'
复制代码

• 线上环境：通常不须要devtool,可是为了方便定位线上问题，能够配置：

mode: 'production',
devtool: 'cheap-module-source-map'
复制代码

• 面试题：sourceMap的原理是什么？？？

想作到每次修改完代码，不用在命令行手动输入指定命令就能够自动打包

方法一 修改package.json的scripts

"scripts": {
    "watch": "webpack --watch"
  },
复制代码

这种方法还不够好，若是想自动实现打包的同时，自动打开浏览器，同时模拟服务器上的一些特性

方法二 使用WebpackDevServer

1. 安装webpack-dev-server

npm install webpack-dev-server -D
复制代码

2. 增长webpack的配置，在webpack.config.js下作以下修改

devServer: {
    contentBase: './dist'
  }
复制代码

3. 修改packge.json,增长scrits的内容

"scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server"
  },
复制代码

4. 此时执行npm run start,每次修改源文件的时候，会自动编译打包，并刷新页面

   

5. 若是不想手动访问8080端口，执行完npm run start自动打开浏览器页面能够增长以下配置

devServer: {
    contentBase: './dist',
    open:true
  }
复制代码

为何要使用WebpackDevServer启动一个本地服务？

有时候咱们要在前端发起ajax请求，本地直接访问html页面是经过file协议打开，是发不了ajax请求的，若是想发送ajax请求，必须使用http协议。