实现分开打包css和js，生成不同的文件 因为浏览器会缓存js和css，每次修改好了js和css，实现打包生成不同的文件名
独立打包js和css文件
安装extract-text-webpack-plugin
执行npm install --save-dev extract-text-webpack-plugin
若后面打包错误，请安装最新版本
npm install --save-dev extract-text-webpack-plugin@next
修改webpack.config.js
const path = require('path');var htmlWebpackPlugin = require('html-webpack-plugin');const extractTextPlugin = require("extract-text-webpack-plugin");const extractCSS = new extractTextPlugin("css/style.css");module.exports = { mode: 'development', entry: './src/js/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/app.bundle.js' }, module: { rules: [ { test: /\.css$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用style-loader来渲染css use: [ { loader: 'css-loader' }, ] }) } ] }, plugins: [ new htmlWebpackPlugin({ filename: 'index.html', template: './src/template/index.html', title: 'this is webpack title' }), extractCSS ]};复制代码 说明
fallback: "style-loader", // 编译后用style-loader来渲染css复制代码
use: [ {loader:'css-loader'} //解析css]复制代码 执行打包 npm run webpack
dist目录
dist├── css│ └── style.css├── index.html└── js └── app.bundle.js复制代码
浏览器访问dist/index.html
修改js和css后生成不同的文件
修改webpack.config.js filename即可实现
修改后的webpack.config.js
const path = require('path');var htmlWebpackPlugin = require('html-webpack-plugin');const extractTextPlugin = require("extract-text-webpack-plugin");const extractCSS = new extractTextPlugin("css/[name]-[hash].css");module.exports = { mode: 'development', entry: './src/js/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name]-[hash].js' }, module: { rules: [ { test: /\.css$/, use: extractCSS.extract({ fallback: "style-loader", // 编译后用style-loader来渲染css use: [ { loader: 'css-loader' }, ] }) } ] }, plugins: [ new htmlWebpackPlugin({ filename: 'index.html', template: './src/template/index.html', title: 'this is webpack title' }), extractCSS ]};复制代码 说明
[name]:源文件的文件名称[hash]:本次打包的所有内容的hash值复制代码
执行打包 npm run webpack
dist目录
dist├── css│ ├── main-4c81874fa8a7d285990e.css│ └── style.css├── index.html└── js ├── app.bundle.js └── main-4c81874fa8a7d285990e.js复制代码
总结
插件安装
执行
npm install --save-dev extract-text-webpack-plugin
安装最新版本
npm install --save-dev extract-text-webpack-plugin@next
插件使用
const extractTextPlugin = require("extract-text-webpack-plugin");复制代码 module.exports rule修改
test: /\.css$/,use: extractCSS.extract({ fallback: "style-loader", // 编译后用style-loader来渲染css use: [ { loader: 'css-loader' }, ]})复制代码 更多文档请参考
思考：js支持ES6,样式支持less、浏览器兼容自动添加前缀
请看