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