Webpack-dev-server 不会在 dist 中放置 bundle [英] Webpack-dev-server does not place bundle in dist
问题描述
我正在尝试为要构建的网站设置 Webpack 配置.我想将 SASS 编译为 CSS 并将其放入 dist 文件夹中.当我运行 npm run build 它工作正常但是当我运行 npm run watch 来触发 Webpack-dev-server 它不会将 index.js 编译为 bundle.js它不会出现在 dist 文件夹中.我的 webpack.config.js 有问题吗?
I am trying to setup a Webpack configuration for a website I want to build. I want to compile SASS to CSS and place it into the dist folder. When I run npm run build it works fine but when I run npm run watch to trigger the Webpack-dev-server it does not compile the index.js to bundle.js and it won't appear in the dist folder. Is there something wrong with my webpack.config.js?
index.html
<html>
<head>
<title>Getting Started</title>
<link rel="stylesheet" href="dist/css/main.min.css">
</head>
<body>
test
<script src="dist/scripts/bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
filename: "../css/main.min.css",
disable: process.env.NODE_ENV === "development"
});
module.exports = {
entry: './src/scripts/index.js',
output: {
path: path.resolve(__dirname, 'dist/scripts'),
filename: 'bundle.js',
publicPath: 'dist/scripts'
},
module: {
rules: [
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
}
]
},
plugins: [
extractSass
]
};
package.json
{
"name": "project1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --optimize-minimize",
"watch": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
},
"dependencies": {}
}
推荐答案
webpack-dev-server 从内存中服务.如果您想在开发过程中使用 webpack-dev-server 查看磁盘上的文件，您需要同时运行标准的 webpack 构建.有关详细信息，请参阅此答案.
webpack-dev-server serves from memory. If you want to see the files on disk during development with webpack-dev-server, you'll need to run a standard webpack build concurrently. See this answer for details.
这篇关于Webpack-dev-server 不会在 dist 中放置 bundle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
