webpack之plugins

作用

plugins 和vue的生命周期有些类似，它会在打包的某个时期帮助你完成一些事情

示例

htmlWebpackPlugin

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

npm install html-webpack-plugin -D

默认
按这种方式生成的html文件内没有任何标签

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

使用模板
src文件夹下可以新建一个index.html文件，按正常的方式书写HTML，里面可以预先放置一些带类名的标签，当打包完成后，会以此文件为模板，将打包后的js文件注入。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: 'src/index.html'
  })]
};

CleanWebpackPlugin

CleanWebpackPlugin 会在打包开始前将制定的目录下的文件全部清空。

npm install clean-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: 'src/index.html'
  }), new CleanWebpackPlugin(['dist'])]
};

问题

CleanWebpackPlugin插件默认根路径是当前目录，所以当位置文件放在build文件夹下后，插件清理的是build文件夹下的dist文件夹，而不是与build同级的dist文件夹。所以要改变插件的根路径

  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new CleanWebpackPlugin( ['dist'], { 
      root: path.resolve(__dirname, '../')
    })
  ]

output可以通过../找到上一级

  output: {    
    path: path.resolve(__dirname, '../dist')  // 文件夹
  }

文档

plugins

网站导航

网站导航