extract-text-webpack-plugin

  1. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  2. const _ExtractTextPlugin = new ExtractTextPlugin({
  3.   filename:'[name].min.css',//坑这里写成了.js
  4.   disable:false
  5. })
  7. plugins.push(_ExtractTextPlugin);

vueLoaderPlugin

  1. const VueLoaderPlugin = require('vue-loader/lib/plugin');
  2. plugins.push(new VueLoaderPlugin());

html-webpack-plugin 单页配置

  1. 内容1  
  2. new HtmlWebpackPlugin({
  3.     //    'base': 'http://example.com/some/page.html',
  4.        // filename:'index.[contenthash].html',
  5.         filename:'index.html',//文件名
  6.         hash:true,//引入文件添加hash 比如main.js?hash=32432
  7.         title:'webpack-hello',//标题名
  8.         minify:false,//内容压缩
  9.         inject:true,//支持引入方式
  10.         template:path.resolve(__dirname,'public/index.html'),//路径
  11.         showErrors:true,
  12.         list:[`<h1>2</h1>`,2,3],//使用ejs文件 index.html 使用<%= htmlWebpackPlugin.options.list %>
  13.         chunks:['main'],//只引入指定的文件
  14.         // 'meta': {//支持meta标签配置
  15.         //     'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
  16.         //     // Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  17.         //     'theme-color': '#4285f4'
  18.         //     // Will generate: <meta name="theme-color" content="#4285f4">
  19.         //   }
  20.         // excludeChunks:['main'],//除了只引入指定的文件之外的文件
  21.     })

html-webpack-plugin多页配置

 plugins = files.reduce((curr,it) => {
    curr.push(new HtmlWebpackPlugin({
      template:`${htmlDIR}/${it}.html`,
      filename:`${it}.html`,
      inject:true,
      chunks:[`${it}`],
      css:[],
      js:['js/lodash.js','js/react.js','js/react-dom.js']
    }));
    return curr;
  },[]);

html-webpack-plugin 引入local或cdn的css、js 配置

new HtmlWebpackPlugin({
      css:['https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'],////local | cdn
      js:['js/lodash.js','js/react.js','js/react-dom.js']//local | cdn
    })

入口html配置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo-react</title>
  <!-- 引入样式 -->
  <% for (var i in htmlWebpackPlugin.options.css) { %>
  <link href="<%= htmlWebpackPlugin.options.css[i] %>" rel="stylesheet" />
  <% } %> 
  <!-- 引入js -->
  <% for (var i in htmlWebpackPlugin.options.js) { %>
  <script src="<%= htmlWebpackPlugin.options.js[i] %>"></script>
  <% } %>
</head>
<body>
  <div id="root"></div>
</body>
</html>

copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin');  
plugins.push(new CopyWebpackPlugin([{
    from:path.resolve(__dirname,'static'),
    to:'static',
    // ignore: ['*.ts', '*.less'],
  }]))

webpack.ProvidePlugin

 plugins.push(new webpack.ProvidePlugin({
    cloneDeep:['lodash','cloneDeep'],
    React:['react'],
    ReactDOM:['react-dom']
  }))

compression-webakck-plugin

const compressionWebpackPlugin = require('compression-webpack-plugin');
plugins.push(new compressionWebpackPlugin())

webpack.DefinePlugin

 plugins.push(new webpack.DefinePlugin({
    webp:JSON.stringify('webpack')
  }))