代码更新后
有老哥遇到过这个问题吗
const config = require(’./webpack.config’) const webpack = require(‘webpack’) const WebpackDevServer = require(‘webpack-dev-server’) const path = require(‘path’)
config.entry.app.unshift( “webpack-dev-server/client?http://localhost:8080/”, ‘webpack/hot/dev-server’, ‘react-hot-loader/patch’); let compiler = webpack(config); const devServerOptions = Object.assign({}, config.devServer, { publicPath: config.output.publicPath, inline: true, stats: { colors: true }, hot: true, hotOnly: true } ); let server = new WebpackDevServer(compiler, devServerOptions); server.listen(8080, ‘localhost’, () => { console.log(‘服务启动于 http://localhost:8080’); });
这个是node server的配置
这个是 webpack.config.js的配置
const path = require(‘path’); const htmlWebpachPlugin = require(‘html-webpack-plugin’); const ExtractTextPlugin = require(‘extract-text-webpack-plugin’); const webpack = require(‘webpack’) const publicPath = ‘/’; const buildPath = ‘dist’; module.exports = { mode: ‘development’, entry: { app: [’./src/main.js’]//入口 }, output: { path: path.resolve(__dirname, buildPath), publicPath: ‘/’, filename: ‘build.js’ //出口 },
module: {
rules: [ //配置加载器
{
test: /\.js$/, //匹配要处理的文件，正则匹配以.js结尾
loader: 'babel-loader'//使用加载器的名称
},
{
test: /\.css/,
use: ['style-loader', 'css-loader']
},
{
test: [/\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'url-loader',
options: {
limit: 10000, //1w字节以下大小的图片会自动转成base64
}
}
]
},
plugins: [
new htmlWebpachPlugin({
template: './public/index.html',
filename: 'index.html'
}),// 生成index.html 并自己引用 build.js
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin()
],
}
