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

Posted 2021-04-29 Web前端社区圈子

目录结构

copy-webpack-plugin

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

安装依赖

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

webpack.config.js

• 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');
const entry = require('./webpack_config/entry_webpack');
const webpack = require('webpack');
const copyWebpackPlugin = require('copy-webpack-plugin');
console.log(encodeURIComponent(process.env.type));
if (process.env.type == 'build') {
  var website = {    
    publicPath: "http://pengrongjie.top:1717/"
  }  
} 
    else {  
    var website = {    
    publicPath: "http://192.168.1.9:1717/"
  } 
} 
module.exports = {  // devtool: 'source-map',
  // 入口 
  entry: {
    entry: './src/entry.js',    
    jquery: 'jquery',    
    vue:'vue'
  },  
  // entry:entry.path,
  // 出口
  output: {    
    //绝对路径
    path: path.resolve(__dirname, 'dist'),    
    filename: '[name].js',    
    publicPath: website.publicPath
  },  
    // 模块
  module: {    
    //规则
    rules: [      // {
      //   test: /\.css$/,
      //   use: [
      //     {
      //       loader:'style-loader'
      //     }
      //   ]
      // },
      {        
        test: /\.css$/,        
        use: ExtractTextPlugin.extract({          
         fallback: "style-loader",         
          // use: "css-loader"
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },            'postcss-loader'
          ]
        })
      },
      {        
          test: /\.(png|jpg|gif)/,        
          use: [{          loader: 'url-loader',          
          options: {            
          limit: 5000,            
          outputPath: 'images/',
          }
        }]
      }, {        
          test: /\.(htm|html)$/i,        
          use: ['html-withimg-loader']
      },      
      // {
      //   test: /\.less$/,
      //   use: [{
      //     loader: 'style-loader'
      //   }, {
      //     loader: 'css-loader'
      //   }, {
      //     loader: 'less-loader'
      //   }]
      // }
      {        
           test: /\.less$/,        
           use: ExtractTextPlugin.extract({          
           use: [{            
           loader: 'css-loader',            
           options: { importLoaders: 1 }
          }, {            
           loader: 'less-loader'
          },'postcss-loader'],          
          fallback: 'style-loader'
        })
      },        // {
      //   test: /\.scss$/,
      //   use: [{
      //     loader:'style-loader'
      //   },{
      //     loader:'css-loader'
      //   },{
      //     loader:'sass-loader'
      //   }]
      // },
      {        
          test: /\.scss$/,        
          use: ExtractTextPlugin.extract({          
          use: [{            loader: 'css-loader',            
          options: { importLoaders: 1 }
          }, {            
          loader: 'sass-loader'
          },            
          'postcss-loader'],          
          fallback: 'style-loader'
        })
      },      
      // {
      //   test:/\.(js|jsx)$/,
      //   use:{
      //     loader:'babel-loader',
      //     options:{
      //       presets:[
      //         'es2015',
      //         'react'
      //       ]
      //     }
      //   },
      //   //过滤掉，不编译node_modules中的文件,
      //   exclude:/node_modules/
      // },
      {        
          test:/\.(js|jsx)$/,        
          use:{          
          loader:'babel-loader',
        },        
        //过滤掉，不编译node_modules中的文件,
        exclude:/node_modules/
      }
       
    ]
  },  
  //插件
  plugins: [    // new webpack.ProvidePlugin({
    //   $:'jquery'
    // }),
    // new uglify()
    new htmlPlugin({     
      minify: {        
      removeAttributeQuotes: true
      },     
      hash: true,      
      template: './src/index.html'
    }),    
    new ExtractTextPlugin("css/index.css"),    
    new PurifyCSSPlugin({      
        paths:glob.sync(path.join(__dirname,'src/*.html')),
    }),    
    new webpack.BannerPlugin('jie的注释'),    
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'jquery',
    //   filename: 'assets/js/jquery.min.js',
    //   minChunks:2
    // })
    new webpack.optimize.CommonsChunkPlugin({      
    name: ['jquery','vue'],      
    filename: 'assets/js/[name].js',      
    minChunks:2
    }),   
    new copyWebpackPlugin([{      
    from: __dirname + '/src/public',      
    to:'./public'
    }])
  ],  
  //开发服务
  devServer: {    
    contentBase: path.resolve(__dirname, 'dist'),    
    host: '192.168.1.9',    
    compress: true, //服务端是否启用压缩
    port: 1717
  },  
    watchOptions: {    //检测修改的时间，以毫秒为单位
    poll: 1000,    
    //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作
    aggregateTimeout: 500,    
    //不监听的目录
    ignored:/node_modules/
  }
}

最后

好了，本文到此结束，希望对你有所帮助：）

如果还有什么疑问或者建议，可以多多交流，文中若有不正之处，万望告知。

觉得本文对你有所帮助？请分享给更多人

关注 [ Web前端社区圈子 ] 加星标，提升前端技能