webpack实现css和js文件的hash解决缓存问题

最新推荐文章于 2024-07-28 00:56:04 发布

zltestliang

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量1.3w

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zltestliang/article/details/71747475

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前期库安装:

package.json

{

 
  "name": "web-cat", 
 
  "version": "1.0.0", 
 
  "description": "在线word翻译", 
 
  "main": "index.js", 
 
  "scripts": { 
 
  "start": "webpack-dev-server" 
 
  }, 
 
  "dependencies": { 
 
  "babel-core": "^6.18.2", 
 
  "babel-loader": "^6.2.8", 
 
  "babel-preset-es2015": "^6.18.0", 
 
  "jquery": "^3.1.1" 
 
  }, 
 
  "devDependencies": { 
 
  "css-loader": "^0.28.1", 
 
  "ejs-loader": "^0.3.0", 
 
  "extract-text-webpack-plugin": "^1.0.1", 
 
  "file-loader": "^0.11.1", 
 
  "html-webpack-plugin": "^2.28.0", 
 
  "style-loader": "^0.17.0", 
 
  "url-loader": "^0.5.8", 
 
  "webpack-dev-server": "^1.16.2" 
 
  } 
 
  } 
 
  2.webpack.config.js 
 
     var webpack = require("webpack"); 
   
     var HtmlWebpackPlugin = require('html-webpack-plugin'); 
   
     const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
   
     module.exports = { 
   
     entry : __dirname + "/dev/main.js", 
   
     output : { 
   
     path : __dirname + "/out", 
   
     filename : "index.js" 
   
     }, 
   
     module:{ 
   
     loaders :[{ test: /\.ejs$/, loader: "ejs-loader?variable=data" }, 
   
     { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader")}, 
   
     {test: /\.(jpg|jpeg|gif|png)$/,loader: 'url?limit=8000&name=imgs/[name].[ext]'}, 
   
     ] 
   
     }, 
   
     plugins: [new HtmlWebpackPlugin({ 
   
     filename: __dirname + '/index.html', 
   
     template: __dirname + '/template.ejs', 
   
     hash : true, 
   
     inject : true, 
   
     }), 
   
     new ExtractTextPlugin("style.css"), 
   
     ] 
   
     3.main.js 
   
     require("../css/style.css") 
    
      4.最后打包的css和js文件就会自动引入到html中去，并且带上hash值。