webpack 简单配置

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')
})