Mixing
Webpack 4 | pug files doesn't compile automatically
I am working on a project in which I am using Pugjs as a template engine.
and webpack 4 as a bundler.
when I change anything in the .pug files I have to re-run the compiler manually.
any help on how I can set it so the compiler run once I edit the files ?.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
exclude: [/images/],
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets/fonts/'
}
}]
},
{
test: /.(png|svg|jpg|gif)$/,
exclude: [/fonts/],
use: {
loader: 'file-loader',
options: {
outputPath: './assets/images/',
name: '[name].[ext]',
}
}
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.pug$/,
use: ['html-loader?interpolate', 'pug-html-loader']
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
// inject: false,
hash: true,
template: './src/index.pug',
filename: 'index.html',
title:'home'
}),
new HtmlWebpackPlugin({
filename: 'contact.html',
hash: true,
template: './src/contact.pug',
// inject: false,
title: 'contact'
}),
new WebpackMd5Hash()
]
};
update 1
it works fine when I use webpack command but it doesn't create the dev server for sue
but when I use webpack-dev-server it create the server but dist folder didn't created without errors in the terminal!
webpack pug
asked Nov 20 '18 at 11:45
Peter WilsonPeter Wilson
2,67012343
add a comment |
I am working on a project in which I am using Pugjs as a template engine.
and webpack 4 as a bundler.
when I change anything in the .pug files I have to re-run the compiler manually.
any help on how I can set it so the compiler run once I edit the files ?.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
exclude: [/images/],
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets/fonts/'
}
}]
},
{
test: /.(png|svg|jpg|gif)$/,
exclude: [/fonts/],
use: {
loader: 'file-loader',
options: {
outputPath: './assets/images/',
name: '[name].[ext]',
}
}
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.pug$/,
use: ['html-loader?interpolate', 'pug-html-loader']
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
// inject: false,
hash: true,
template: './src/index.pug',
filename: 'index.html',
title:'home'
}),
new HtmlWebpackPlugin({
filename: 'contact.html',
hash: true,
template: './src/contact.pug',
// inject: false,
title: 'contact'
}),
new WebpackMd5Hash()
]
};
update 1
it works fine when I use webpack command but it doesn't create the dev server for sue
but when I use webpack-dev-server it create the server but dist folder didn't created without errors in the terminal!
webpack pug
asked Nov 20 '18 at 11:45
Peter WilsonPeter Wilson
2,67012343
how are you running it?
– PlayMa256
Nov 20 '18 at 12:02
@PlayMa256 webpack-dev-server --mode development
– Peter Wilson
Nov 20 '18 at 12:21
add a comment |
I am working on a project in which I am using Pugjs as a template engine.
and webpack 4 as a bundler.
when I change anything in the .pug files I have to re-run the compiler manually.
any help on how I can set it so the compiler run once I edit the files ?.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
exclude: [/images/],
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets/fonts/'
}
}]
},
{
test: /.(png|svg|jpg|gif)$/,
exclude: [/fonts/],
use: {
loader: 'file-loader',
options: {
outputPath: './assets/images/',
name: '[name].[ext]',
}
}
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.pug$/,
use: ['html-loader?interpolate', 'pug-html-loader']
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
// inject: false,
hash: true,
template: './src/index.pug',
filename: 'index.html',
title:'home'
}),
new HtmlWebpackPlugin({
filename: 'contact.html',
hash: true,
template: './src/contact.pug',
// inject: false,
title: 'contact'
}),
new WebpackMd5Hash()
]
};
update 1
it works fine when I use webpack command but it doesn't create the dev server for sue
but when I use webpack-dev-server it create the server but dist folder didn't created without errors in the terminal!
webpack pug
asked Nov 20 '18 at 11:45
Peter WilsonPeter Wilson
2,67012343
I am working on a project in which I am using Pugjs as a template engine.
and webpack 4 as a bundler.
when I change anything in the .pug files I have to re-run the compiler manually.
any help on how I can set it so the compiler run once I edit the files ?.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
test: /.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
exclude: [/images/],
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets/fonts/'
}
}]
},
{
test: /.(png|svg|jpg|gif)$/,
exclude: [/fonts/],
use: {
loader: 'file-loader',
options: {
outputPath: './assets/images/',
name: '[name].[ext]',
}
}
},
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.pug$/,
use: ['html-loader?interpolate', 'pug-html-loader']
}
]
},
plugins: [
new CleanWebpackPlugin('dist', {}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css',
}),
new HtmlWebpackPlugin({
// inject: false,
hash: true,
template: './src/index.pug',
filename: 'index.html',
title:'home'
}),
new HtmlWebpackPlugin({
filename: 'contact.html',
hash: true,
template: './src/contact.pug',
// inject: false,
title: 'contact'
}),
new WebpackMd5Hash()
]
};
update 1
it works fine when I use webpack command but it doesn't create the dev server for sue
but when I use webpack-dev-server it create the server but dist folder didn't created without errors in the terminal!
webpack pug
webpack pug
asked Nov 20 '18 at 11:45
Peter WilsonPeter Wilson
2,67012343
asked Nov 20 '18 at 11:45
Peter WilsonPeter Wilson
2,67012343
edited Nov 20 '18 at 13:34
Peter Wilson
asked Nov 20 '18 at 11:45
Peter WilsonPeter Wilson
2,67012343
asked Nov 20 '18 at 11:45
Peter WilsonPeter Wilson
2,67012343
asked Nov 20 '18 at 11:45
Peter WilsonPeter Wilson
2,67012343
2,67012343
how are you running it?
– PlayMa256
Nov 20 '18 at 12:02
@PlayMa256 webpack-dev-server --mode development
– Peter Wilson
Nov 20 '18 at 12:21
add a comment |
how are you running it?
– PlayMa256
Nov 20 '18 at 12:02
@PlayMa256 webpack-dev-server --mode development
– Peter Wilson
Nov 20 '18 at 12:21
how are you running it?
– PlayMa256
Nov 20 '18 at 12:02
how are you running it?
– PlayMa256
Nov 20 '18 at 12:02
@PlayMa256 webpack-dev-server --mode development
– Peter Wilson
Nov 20 '18 at 12:21
@PlayMa256 webpack-dev-server --mode development
– Peter Wilson
Nov 20 '18 at 12:21
add a comment |
1 Answer
1
active
oldest
votes
You have 2 options to do that:
- Using Webpack's Watch Mode
- Using webpack-dev-server
Webpack Watch Mode
Just run webpack with --watch argument
webpack --watch
With the above command, webpack will watch your files and with any changes, will recompile your code. This is the easiest way.
webpack-dev-server
The webpack-dev-server provides you with a simple web server and reload your browser every time you make any changes to your file.
Install webpack-dev-server:
npm install --save-dev webpack-dev-server
Also add devServer your webpack.config.js file:
module.exports = {
devServer: {
contentBase: './dist'
}
}
Now run it with webpack-dev-server. You can visit your webpage on localhost:8080 and any changes to your file will also recompile your bundles and reload your browser.
Note that you might need to run the above command with npx:
npx webpack --watch
and
npx webpack-dev-server
Update 1
webpack-dev-server doesn't make any files on the hard-disk—It only create files in the memory for faster processing. Otherwise, the results are the same.
answered Nov 20 '18 at 13:28
Nima HejaziNima Hejazi
362
I want to usewebpack-dev-serverfor development reasons but it fails to created thedistdirectory without any errors in the terminal
– Peter Wilson
Nov 20 '18 at 13:32
I updated my question
– Peter Wilson
Nov 20 '18 at 13:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392317%2fwebpack-4-pug-files-doesnt-compile-automatically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You have 2 options to do that:
- Using Webpack's Watch Mode
- Using webpack-dev-server
Webpack Watch Mode
Just run webpack with --watch argument
webpack --watch
With the above command, webpack will watch your files and with any changes, will recompile your code. This is the easiest way.
webpack-dev-server
The webpack-dev-server provides you with a simple web server and reload your browser every time you make any changes to your file.
Install webpack-dev-server:
npm install --save-dev webpack-dev-server
Also add devServer your webpack.config.js file:
module.exports = {
devServer: {
contentBase: './dist'
}
}
Now run it with webpack-dev-server. You can visit your webpage on localhost:8080 and any changes to your file will also recompile your bundles and reload your browser.
Note that you might need to run the above command with npx:
npx webpack --watch
and
npx webpack-dev-server
Update 1
webpack-dev-server doesn't make any files on the hard-disk—It only create files in the memory for faster processing. Otherwise, the results are the same.
answered Nov 20 '18 at 13:28
Nima HejaziNima Hejazi
362
I want to usewebpack-dev-serverfor development reasons but it fails to created thedistdirectory without any errors in the terminal
– Peter Wilson
Nov 20 '18 at 13:32
I updated my question
– Peter Wilson
Nov 20 '18 at 13:34
add a comment |
You have 2 options to do that:
- Using Webpack's Watch Mode
- Using webpack-dev-server
Webpack Watch Mode
Just run webpack with --watch argument
webpack --watch
With the above command, webpack will watch your files and with any changes, will recompile your code. This is the easiest way.
webpack-dev-server
The webpack-dev-server provides you with a simple web server and reload your browser every time you make any changes to your file.
Install webpack-dev-server:
npm install --save-dev webpack-dev-server
Also add devServer your webpack.config.js file:
module.exports = {
devServer: {
contentBase: './dist'
}
}
Now run it with webpack-dev-server. You can visit your webpage on localhost:8080 and any changes to your file will also recompile your bundles and reload your browser.
Note that you might need to run the above command with npx:
npx webpack --watch
and
npx webpack-dev-server
Update 1
webpack-dev-server doesn't make any files on the hard-disk—It only create files in the memory for faster processing. Otherwise, the results are the same.
answered Nov 20 '18 at 13:28
Nima HejaziNima Hejazi
362
I want to usewebpack-dev-serverfor development reasons but it fails to created thedistdirectory without any errors in the terminal
– Peter Wilson
Nov 20 '18 at 13:32
I updated my question
– Peter Wilson
Nov 20 '18 at 13:34
add a comment |
You have 2 options to do that:
- Using Webpack's Watch Mode
- Using webpack-dev-server
Webpack Watch Mode
Just run webpack with --watch argument
webpack --watch
With the above command, webpack will watch your files and with any changes, will recompile your code. This is the easiest way.
webpack-dev-server
The webpack-dev-server provides you with a simple web server and reload your browser every time you make any changes to your file.
Install webpack-dev-server:
npm install --save-dev webpack-dev-server
Also add devServer your webpack.config.js file:
module.exports = {
devServer: {
contentBase: './dist'
}
}
Now run it with webpack-dev-server. You can visit your webpage on localhost:8080 and any changes to your file will also recompile your bundles and reload your browser.
Note that you might need to run the above command with npx:
npx webpack --watch
and
npx webpack-dev-server
Update 1
webpack-dev-server doesn't make any files on the hard-disk—It only create files in the memory for faster processing. Otherwise, the results are the same.
answered Nov 20 '18 at 13:28
Nima HejaziNima Hejazi
362
You have 2 options to do that:
- Using Webpack's Watch Mode
- Using webpack-dev-server
Webpack Watch Mode
Just run webpack with --watch argument
webpack --watch
With the above command, webpack will watch your files and with any changes, will recompile your code. This is the easiest way.
webpack-dev-server
The webpack-dev-server provides you with a simple web server and reload your browser every time you make any changes to your file.
Install webpack-dev-server:
npm install --save-dev webpack-dev-server
Also add devServer your webpack.config.js file:
module.exports = {
devServer: {
contentBase: './dist'
}
}
Now run it with webpack-dev-server. You can visit your webpage on localhost:8080 and any changes to your file will also recompile your bundles and reload your browser.
Note that you might need to run the above command with npx:
npx webpack --watch
and
npx webpack-dev-server
Update 1
webpack-dev-server doesn't make any files on the hard-disk—It only create files in the memory for faster processing. Otherwise, the results are the same.
answered Nov 20 '18 at 13:28
Nima HejaziNima Hejazi
362
edited Nov 20 '18 at 16:20
answered Nov 20 '18 at 13:28
Nima HejaziNima Hejazi
362
answered Nov 20 '18 at 13:28
Nima HejaziNima Hejazi
362
answered Nov 20 '18 at 13:28
Nima HejaziNima Hejazi
362
362
I want to usewebpack-dev-serverfor development reasons but it fails to created thedistdirectory without any errors in the terminal
– Peter Wilson
Nov 20 '18 at 13:32
I updated my question
– Peter Wilson
Nov 20 '18 at 13:34
add a comment |
I want to usewebpack-dev-serverfor development reasons but it fails to created thedistdirectory without any errors in the terminal
– Peter Wilson
Nov 20 '18 at 13:32
I updated my question
– Peter Wilson
Nov 20 '18 at 13:34
I want to use
webpack-dev-server for development reasons but it fails to created the dist directory without any errors in the terminal– Peter Wilson
Nov 20 '18 at 13:32
I want to use
webpack-dev-server for development reasons but it fails to created the dist directory without any errors in the terminal– Peter Wilson
Nov 20 '18 at 13:32
I updated my question
– Peter Wilson
Nov 20 '18 at 13:34
I updated my question
– Peter Wilson
Nov 20 '18 at 13:34
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392317%2fwebpack-4-pug-files-doesnt-compile-automatically%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
how are you running it?
– PlayMa256
Nov 20 '18 at 12:02
@PlayMa256 webpack-dev-server --mode development
– Peter Wilson
Nov 20 '18 at 12:21