1、webpack打包拷贝静态文件

1.安装插件

npm install copy-webpack-plugin —save-dev

2.在webpack.prod.conf.js中引入插件,并配置

  1. const CopyWebpackPlugin = require('copy-webpack-plugin') //引入
  2. //配置
  3. new CopyWebpackPlugin([
  4. {
  5. from: path.resolve(__dirname, '../static'), //打包的静态次源目录地址
  6. to: './static', //打包到dist目录下的static
  7. ignore: ['.*'] //忽略掉某些特定文件
  8. }
  9. ])

image.png
image.png

2、生成HTML

HtmlWebpackPlugin会自动为你生成一个HTML文件,根据指定的index.html模板生成对应的 html 文件

1、安装插件

npm install html-webpack-plugin —save-dev

2.在webpack.prod.conf.js中引入插件,并配置

  1. const HtmlWebpackPlugin = require('html-webpack-plugin')
  2. new HtmlWebpackPlugin({
  3. filename: config.build.index, // 输出的文件名
  4. template: 'index.html', // 源模板文件
  5. inject: true,
  6. minify: {
  7. caseSensitive: false, //是否大小写敏感
  8. minimize: true, //最小化(高度压缩)
  9. removeAttributeQuotes: true, //去除引号
  10. collapseWhitespace: true, //去除空格,html文件压缩成一行
  11. removeComments: true, //去除注释
  12. minifyCSS: true,//压缩html内的css代码
  13. minifyJS: true, //压缩html内的js代码
  14. removeEmptyElements: true, //去除内容为空的元素
  15. removeEmptyAttributes: true, //去除空属性
  16. },
  17. chunksSortMode: 'dependency'
  18. }),

image.png

也可参考这份