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

前期库安装:

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值。