1. webpack-demo
    2.   |- package.json
    3.   |- webpack.config.js
    4. + |- server.js
    5.   |- /dist
    6.   |- /src
    7.     |- data.xml
    8.     |- icon.png+   
    9.     |- style.css
    10.     |- my-font.woff
    11.     |- my-font.woff2
    12.     |- print.js
    13.     |- index.js
    14.   |- /node_modules
    1. npm install --save-dev webpack-dev-server
    2. npm install --save-dev express webpack-dev-middleware
    1. // webpack.config.js
    2. const path = require('path');
    3. const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成页面
    4. const CleanWebpackPlugin = require('clean-webpack-plugin'); // 自动清理，清理dist旧文件
    6. module.exports = {
    7.     mode: 'development',
    8.     devtool: 'inline-source-map', // 站点地图，可以输出错误发生所在地
    9.     devServer: {
    10.         contentBase: './dist' // webpack-dev-server在哪里寻找文件
    11.     },
    12.     entry: {
    13.         index: './src/index.js',
    14.         print: './src/print.js'
    15.     },
    16.     plugins: [
    17.         new CleanWebpackPlugin(['dist']),
    18.         new HtmlWebpackPlugin({
    19.             title: 'VISION-CANVAS-L',
    20.             filename: 'index.html',
    21.             template: 'view/index.html',
    22.         }),
    23.     ],
    24.     output: {
    25.         filename: '[name].bundle.js',
    26.         path: path.resolve(__dirname, 'dist'),
    27.         publicPath: '/'
    28.     },
    29.     module: {
    30.         rules: [
    31.             {
    32.                 test: /\.css$/,
    33.                 use: [
    34.                     'style-loader',
    35.                     'css-loader'
    36.                 ]
    37.             },
    38.             {
    39.                 test: /\.(png|svg|jpg|gif)$/,
    40.                 use: [
    41.                     'file-loader'
    42.                 ]
    43.             },
    44.             {
    45.                 test: /\.(woff|woff2|eot|ttf|otf)$/,
    46.                 use: [
    47.                     'file-loader'
    48.                 ]
    49.             },
    50.             {
    51.                 test: /\.(csv|tsv)$/,
    52.                 use: [
    53.                     'csv-loader'
    54.                 ]
    55.             },
    56.             {
    57.                 test: /\.xml$/,
    58.                 use: [
    59.                     'xml-loader'
    60.                 ]
    61.             }
    62.         ],
    63.     }
    64. };
    1. // /server.js
    2. const express = require('express');
    3. const webpack = require('webpack');
    4. const webpackDevMiddleware = require('webpack-dev-middleware');
    6. const app = express();
    7. const config = require('./webpack.config.js');
    8. const compiler = webpack(config);
    10. // Tell express to use the webpack-dev-middleware and use the webpack.config.js
    11. // configuration file as a base.
    12. app.use(webpackDevMiddleware(compiler, {
    13.   publicPath: config.output.publicPath
    14. }));
    16. // Serve the files on port 3000.
    17. app.listen(3000, function () {
    18.   console.log('Example app listening on port 3000!\n');
    19. });
    1. {
    2.   "name": "webpackDemo",
    3.   "version": "1.0.0",
    4.   "description": "",
    5.   "private": true,
    6.   "main": "index.js",
    7.   "scripts": {
    8.     "test": "echo \"Error: no test specified\" && exit 1",
    9.     "watch": "webpack --watch",
    10.     "build": "webpack",
    11.     "start": "webpack-dev-server --open",
    12.     "server": "node server.js"
    13.   },
    14.   "keywords": [],
    15.   "author": "",
    16.   "license": "ISC",
    17.   "devDependencies": {
    18.     "clean-webpack-plugin": "^1.0.0",
    19.     "css-loader": "^2.0.0",
    20.     "csv-loader": "^3.0.2",
    21.     "express": "^4.16.4",
    22.     "file-loader": "^2.0.0",
    23.     "html-webpack-plugin": "^3.2.0",
    24.     "style-loader": "^0.23.1",
    25.     "webpack": "^4.27.1",
    26.     "webpack-cli": "^3.1.2",
    27.     "webpack-dev-middleware": "^3.4.0",
    28.     "webpack-dev-server": "^3.1.10",
    29.     "xml-loader": "^1.2.1"
    30.   },
    31.   "dependencies": {
    32.     "lodash": "^4.17.11"
    33.   }
    34. }