webpack.config.js
const path = require('path'); const HtmlWebpackPlugin=require('html-webpack-plugin'); const CleanWebpackPlugin=require('clean-webpack-plugin') module.exports = { //输入文件地址 entry: { app: './src/index.js', print: './src/print.js' }, //指引错误位置 devtool: 'inline-source-map', //告知 webpack-dev-server,在 localhost:8080 下建立服务 devServer:{ contentBase:'./dist' }, plugins:[ //清理旧文件夹 new CleanWebpackPlugin(['dist']), //创建了一个全新的文件,所有的 bundle 会自动添加到 html 中 new HtmlWebpackPlugin({ title:'Output Management' }) ], //输出文件地址 output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), //文件资源 publicPath:'/' }, module: { rules: [ //加载css { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, //加载图片 { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] } ] } }
package.json
"scripts": { "build": "webpack", "watch": "webpack --watch", "start": "webpack-dev-server --open", "server":"node server.js" },
server.js
const express=require('express'); const webpack=require('webpack'); const webpackDevMidddleware=require('webpack-dev-middleware'); const app=express(); const config=require('./webpack.config.js'); const compiler=webpack(config); app.use(webpackDevMidddleware(compiler,{ publicPath:config.output.publicPath })) app.listen(3000,function(){ console.log('webpack start 3000') })