webpack 静态资源集中输出的方法示例

目录结构

copy-webpack-plugin

工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片。打包时保留这些静态资源，直接打包到制定文件夹

安装依赖

cnpm install copy-webpack-plugin --save-dev

webpack.config.js

• from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。
• to:要打包到的文件夹路径，跟随output配置中的目录。所以不需要再自己加__dirname。

const copyWebpackPlugin = require('copy-webpack-plugin');
...
  plugins: [
    new copyWebpackPlugin([{
      from: __dirname + '/src/public',
      to:'./public'
    }])
  ],

打包，运行

npm run build
npm run server

webpack.config.js全部代码

const path = require('path');
const glob = require('glob');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurifyCSSPlugin = require('purifycss-webpack');