（一）

webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');module.exports = {// entry: './src/index.js',entry: { //入口有几个文件，出口就会输出几个文件app: './src/index.js',print: './src/print.js'},output: {// filename: 'bundle.js',filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')},devServer: { //为你提供了一个简单的 web 服务器，并且能够实时重新加载 npm install --save-dev webpack-dev-server// contentBase: './dist',contentBase: path.join(__dirname, "dist"),//告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要compress: true, //一切服务都启用gzip 压缩historyApiFallback: true,hot: true, //启用 webpack 的模块热替换特性port: 9000 //指定要监听请求的端口号},devtool: 'inline-source-map', //工具仅用于开发环境，请不要在生产环境中使用它们！ 为了更容易地追踪错误和警告module: {rules: [{ //加载css npm install --save-dev style-loader css-loadertest: /\.css$/,use: ['style-loader','css-loader']},{ //加载图片 npm install --save-dev file-loadertest: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},{ //加载字体test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['file-loader']}]},plugins: [ //设定 HtmlWebpackPlugin npm install --save-dev html-webpack-pluginnew HtmlWebpackPlugin({ //设定 HtmlWebpackPlugin,生成新的html替换旧的html npm install --save-dev html-webpack-plugintitle: 'Output Management'}),new CleanWebpackPlugin(['dist']), //清理 /dist 文件夹,重新生成新的dist文件夹new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin()]
};

package.json:

{"name": "webpack-demo","version": "1.0.0","description": "","private": true,"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack-dev-server --open"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^0.1.19","css-loader": "^1.0.1","file-loader": "^2.0.0","html-webpack-plugin": "^3.2.0","style-loader": "^0.23.1","webpack": "^4.23.1","webpack-cli": "^3.1.2","webpack-dev-server": "^3.1.10","webpack-merge": "^4.1.4"},"dependencies": {"lodash": "^4.17.11"}
}