一、package.json
{ "name": "webpack-demo", "version": "1.0.0", "description": "", "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --watch", "start": "webpack-dev-server --open", "server": "node server.js", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "clean-webpack-plugin": "^3.0.0", "css-loader": "^3.0.0", "csv-loader": "^3.0.2", "express": "^4.17.1", "file-loader": "^4.0.0", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.23.1", "url-loader": "^2.0.1", "webpack": "^4.35.0", "webpack-cli": "^3.3.5", "webpack-dev-middleware": "^3.7.0", "webpack-dev-server": "^3.7.2", "webpack-manifest-plugin": "^2.0.4", "xml-loader": "^1.2.1" }, "dependencies": { "lodash": "^4.17.11" } }
二、index.js
import _ from 'lodash'; import printMe from './print.js'; import './style.css'; function component() { const element = document.createElement('div'); const btn = document.createElement('button'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); btn.innerHTML = 'Click me and check the console!'; btn.onclick = printMe; // onclick event is bind to the original printMe function element.appendChild(btn); return element; } let element = component(); // Store the element to re-render on print.js changes document.body.appendChild(element); if (module.hot) { module.hot.accept('./print.js', function () { console.log('########################'); document.body.removeChild(element); element = component(); // Re-render the "component" to update the click handler document.body.appendChild(element); }) }
三、print.js
export default function printMe() { console.log('3335') }
四、style.js
body { background: blue; }
五、webpack.conf.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成index.html const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清空dist目录 var ManifestPlugin = require('webpack-manifest-plugin'); //生成关系文件a mapping of all source file names to their corresponding output file const webpack = require('webpack'); module.exports = { // entry: './src/index.js', mode: 'development', entry: { app: './src/index.js' // print: './src/print.js' }, devtool: 'inline-source-map', devServer: { contentBase: './dist', hot: true }, devtool: 'inline-cheap-module-source-map', plugins: [ new ManifestPlugin(), new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Output Management' }), new webpack.HotModuleReplacementPlugin() ], // output: { // filename: 'bundle.js', // path: path.resolve(__dirname, 'dist') // } output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, }