Webpack,您将成为我的死。
html-webpack-plugin在生产中工作正常。 'dist'文件夹已加载我的html模板并插入了捆绑包。好吧。
但是,webpack-dev-server不会这样做。它似乎正在创建名为“ Webpack App”的OWN html页面并提供服务。 这到底是从哪里来的?我需要在开发和生产中保持一致,以便了解最新情况。我正在使用webpack-merge合并不同的配置。
webpack.common
#include <stdio.h>
int main(int argc, const char *argv[]) {
int i=1;
while (i <= 5)
{
int j = 1;
while(j <= i)
{
printf("* ");
j++;
}
printf("\n");
i++;
}
return 0;
}
webpack.dev
module.exports = {
entry: [
"react-hot-loader/patch",
resolve("src", "entry.js")
],
output: {
filename: "bundle.js",
path: resolve('dist'),
publicPath: "/"
},
module: {
rules: [
{
test: /\.js$/,
exclude: [resolve(__dirname, 'node_modules')],
use: [{ loader: 'babel-loader'}]
},
{
test: /\.s(a|c)ss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
}
]
},
resolve: {
extensions: [".js", "jsx"],
alias: {
actions: resolve(__dirname, 'src', 'actions'),
components: resolve(__dirname, 'src', 'components'),
lib: resolve(__dirname, 'src', 'lib'),
routes: resolve(__dirname, 'src', 'routes'),
store: resolve(__dirname, 'src', 'store'),
styles: resolve(__dirname, 'src', 'styles'),
test: resolve(__dirname, 'src', 'test'),
},
modules: [
resolve(__dirname, 'node_modules'),
resolve(__dirname, 'src')
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
"template": resolve(__dirname, "src", "index.html"),
"filename": resolve(__dirname, "dist", "index.html"),
"hash": true,
"inject": true,
"compile": true,
"favicon": false,
"minify": true,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "React Starter",
"xhtml": true,
"chunksSortMode": 'none' //fixes bug
}),
new CleanWebpackPlugin(['dist'])
]
}
答案 0 :(得分:0)
Webpack开发服务器不会将文件写入dist文件夹,而是从内存中提供捆绑软件。但是,如果使用contentBase选项(默认为当前工作目录),它将从磁盘提供这些文件。不过,内存文件优先于contentBase文件。
答案 1 :(得分:0)
自从几年前我学习webpack以来,情况似乎有所改变。除非另行说明,否则它将创建自己的html文件。所以现在这样做:
npm i -D html-loader
在您的开发配置中像这样设置这些部分:
devServer: {
contentBase: './dist'
},
...
module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
},
...
plugins: [
new HtmlWebpackPlugin({
template: 'src/template.html'
})
...
现在您的template.html文件可以使用了。