qq20004604 / webpack-study Goto Github PK

const path = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

// 定义一些文件夹的路径
const ROOT_PATH = path.resolve(__dirname);
const SCRIPT_PATH = path.resolve(ROOT_PATH, 'script/app.js');
const BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
    entry: SCRIPT_PATH,
    output: {
        path: BUILD_PATH,
        filename: 'build.js', // 将script文件夹中的两个js文件合并成build目录下的bundle.js文件
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            } 
        ]
    },
    devServer: {
        contentBase: './build',
        hot: true
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: 'hello~~'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ]
}

const path = require('path');
const express = require('express');
const webpack = require('webpack');

const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackConfig = require('./webpack.config');

const app = express(),
            DIST_DIR = path.join(__dirname, 'dist'), // // 设置静态访问文件路径
            PORT = 9090, // 设置启动端口
            complier = webpack(webpackConfig);

const devMiddlewart = webpackDevMiddleware(complier, {
    // 这里是对 webpackDevMiddleware 的一些配置，具体其他配置我们下面已经列出来了。

    //绑定中间件的公共路径,与webpack配置的路径相同
    publicPath: webpackConfig.output.publicPath,
    quiet: true     // 向控制台显示任何内容 
});

app.use(devMiddlewart);

// 设置访问静态文件的路径
app.use(express.static(DIST_DIR)) 

app.listen(PORT, function(){
    console.log('成功启动：localhost:'+PORT);
})

"scripts": {
    "start": "node dev-sever.js",
    "dev": "webpack-dev-server --open --config webpack.config.js"
  },