Webpack 网页包开发服务器未生成和重新加载index.html
我正在使用WebpackV4,试图将Webpackdev服务器添加到我的项目中。我在这里面临的问题是,当我运行webpack dev server命令my时,它会在默认浏览器中打开一个本地服务器,但不会为已编译的资产提供服务,也不会监视文件的更改 我还没有实施热模块更换 这是项目结构 package.jsonWebpack 网页包开发服务器未生成和重新加载index.html,webpack,webpack-dev-server,webpack-2,webpack-hmr,webpack-4,Webpack,Webpack Dev Server,Webpack 2,Webpack Hmr,Webpack 4,我正在使用WebpackV4,试图将Webpackdev服务器添加到我的项目中。我在这里面临的问题是,当我运行webpack dev server命令my时,它会在默认浏览器中打开一个本地服务器,但不会为已编译的资产提供服务,也不会监视文件的更改 我还没有实施热模块更换 这是项目结构 package.json { "name": "webpack-starterkit", "version": "1.0.0", "description": "webpack starter kit
{
"name": "webpack-starterkit",
"version": "1.0.0",
"description": "webpack starter kit",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack --mode development",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.6.3",
"browser-sync": "^2.24.4",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^0.28.11",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}
}
webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
module.exports = {
entry: "./app/src/js/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "app/dist/js"),
publicPath: "dist/js"
},
devServer: {
contentBase: path.resolve(__dirname, "app/dist"),
port: 3000,
hot: true
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: "style-loader"
},
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "../css/style.css"
}),
]
};
请帮助我解决此问题。用于设置应用程序的输出目录
您试图在“app/dist/js”
中输出所有内容,而应将其设置为“app/dist”
,然后您可以为资产选择特定的输出路径
要在名为js的文件夹中输出javascript包,可以设置output.filename:“js/bundle.js”
对于css,您可以在MinicsExtractPlugin选项中设置文件名:“css/style.css”
在本例中无需设置(将从本地主机服务器的根目录提供资产)
重要提示:如果您运行生产捆绑包,然后将应用上载到与服务器根目录不同的文件夹中,则需要相应地设置publicPath
此外,您不需要任何devServer
选项(默认情况下用于http://localhost:8080/
)
下面是解决方案(我将代码简化了一点),devServer
即使使用html文件也可以正常工作
package.json
{
"name": "webpack-starterkit",
"version": "1.0.0",
"description": "webpack starter kit",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack --mode development",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^8.6.3",
"browser-sync": "^2.24.4",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^0.28.11",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.5",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}
}
{
“名称”:“网页包测试”,
“版本”:“1.0.0”,
“main”:“index.js”,
“脚本”:{
“dev”:“webpack--mode=development--devtool=false”,
“开始”:“网页包开发服务器--模式=开发”
},
“许可证”:“麻省理工学院”,
“依赖性”:{
“css加载器”:“^0.28.11”,
“html网页包插件”:“^3.2.0”,
“迷你css提取插件”:“^0.4.0”,
“网页包”:“^4.12.0”,
“webpack cli”:“^3.0.8”,
网页包开发服务器“^3.1.4”
}
}
webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
module.exports = {
entry: "./app/src/js/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "app/dist/js"),
publicPath: "dist/js"
},
devServer: {
contentBase: path.resolve(__dirname, "app/dist"),
port: 3000,
hot: true
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: "style-loader"
},
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "../css/style.css"
}),
]
};
const path=require(“路径”);
const MiniCssExtractPlugin=require(“迷你css提取插件”);
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
条目:“./app/src/js/index.js”,
输出:{
path:path.resolve(uu dirname,“app/dist”),
文件名:“js/bundle.js”
},
模块:{
规则:[
{
测试:/\.css$/,,
使用:[
{loader:MiniCssExtractPlugin.loader},
{加载程序:“css加载程序”}
]
}
]
},
插件:[
新的MinicsSextract插件({
文件名:“css/style.css”
}),
新HtmlWebpackPlugin({
模板:“./app/src/index.html”,
标题:“测试”
})
]
};
index.html
你好,世界
index.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
module.exports = {
entry: "./app/src/js/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "app/dist/js"),
publicPath: "dist/js"
},
devServer: {
contentBase: path.resolve(__dirname, "app/dist"),
port: 3000,
hot: true
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: "style-loader"
},
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "../css/style.css"
}),
]
};
导入“./css/style.css”;
log(“test!”);
style.css
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
module.exports = {
entry: "./app/src/js/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "app/dist/js"),
publicPath: "dist/js"
},
devServer: {
contentBase: path.resolve(__dirname, "app/dist"),
port: 3000,
hot: true
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: "style-loader"
},
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "../css/style.css"
}),
]
};
正文{
背景色:红色;
}
文件夹结构
@ippi,我想用webpack dev server实现开发环境。我使用生产模式构建它,工作资产正在编译并生成到“dist”文件夹。我读过的大多数关于webpack devserver的教程都是自动编译资产并观察更改的,但在我的案例中并没有发生这种情况。有什么想法吗?我猜,试着换成公共路径:“/js/”@VitaliySmolyakov,不工作