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协议。