I use Webpack to build file and for Wordpress theme.
My website running via Xampp with address is http://localhost/simple
How can I build webpack -watch to refresh Web address using devServer:
My directories:
- scss
+ base.scss
- src
+ app.js
- public
+ bundle.js
+ style.css
I use devServer like this but it does not automatically refresh:
devServer: {
publicPath: "/",
contentBase: "./public",
hot: true
},
Can you support me for this?
Thank you so much.
You also need webpack to run your development environment.
This 'devServer: hot' only enables webpack's Hot Module Replacement feature. In the webpack documentation it is stated that webpack.HotModuleReplacementPlugin is required to enable hot module replacement.
const webpack = require('webpack');
devServer: {
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
Related
So currently I have my library split as 2 entrypoints, so in Vite config I'm doing this:
build: {
lib: {
entry: [resolve(__dirname, 'src/entry1.ts'), resolve(__dirname, 'src/entry2.ts')],
name: 'LibraryName',
fileName: '[name]',
},
},
This causes Vite to generate 2 output files - entry1.js and entry2.js, but only single css file - style.css
How can I make Vite generate entry1.css and entry2.css for each entrypoint?
Ive added reveal.js to my rails 7 app and with a little tinkering I can switch between slides, however the transitions (eg, slide or fade) do not work.
In terms of installation:
yarn add reveal.js
application.js
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
let deck = new Reveal({
plugins: [ Markdown ]
})
deck.initialize();
slides html:
<div class="reveal">
<div class="slides">
<section data-transition="slide"><h1>Horizontal 1</h1></section>
<section data-transition="fade"><h1>Horizontal 2</h1></section>
</div>
</div>
What I have done/tried
I dont have any javascript errors in my console so im thinking this might just some issue with the css / the way im importing the css. so far I have tried copying the reveal.scss content (from node_modules) into a file in my assets/stylesheets/reveal.scss with no luck:
Module parse failed: Unexpected character '#' (1:0)
12:31:02 js.1 | You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
12:31:02 js.1 | > #use "sass:math";
I also tried commenting out the lines (only 3) that use the math property, however that didnt work for me.
I tried importing the css direction (in assets/stylesheets/application.scss) with:
#import "reveal.js/dist/reveal"
// and
#import "reveal.js/css/reveal"
the file in dist is a .css file, while the other one has the contents that I copied before and showed the same error regarding sass:math.
Next I thought I might not have sass so I did yarn add sass and yarn add node-sass, which also didnt make the transitions work.
Now when I open the demo.html and index.html files (that come with the reveal.js dependency in the node_modules) in a browser tab transitions work seamlessly. Meaning it must have to do with how im importing the css/scss?
EDIT: webpack.config.js
const path = require("path")
const webpack = require("webpack")
module.exports = {
mode: "production",
devtool: "source-map",
entry: {
application: "./app/javascript/application.js"
},
output: {
filename: "[name].js",
sourceMapFilename: "[file].map",
path: path.resolve(__dirname, "app/assets/builds"),
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
}
It looks like you need to install and then add the appropriate loaders to your webpack config. Here is the official webpack documentation. It would look something like this:
const path = require("path")
const webpack = require("webpack")
module.exports = {
mode: "production",
devtool: "source-map",
entry: {
application: "./app/javascript/application.js"
},
output: {
filename: "[name].js",
sourceMapFilename: "[file].map",
path: path.resolve(__dirname, "app/assets/builds"),
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
},
}
I am writing a webpage with ReactJS.
I made a css stylesheet to change some bootstrap classes (for my Navbar fonts), added the link to html file, and it did not work. Then I installed style loaders and edited webpack.config file, but again server can't load css file. See below my webpack.config code .
var path = require("path");
var webpack = require('webpack');
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
},
{
test: /\.css?/,
loader: "style-loader!css-loader",
include: SRC_DIR
}
]
}
};
module.exports = config;
Having a link such as <link rel="stylesheet" type="text/css" href="/some/path/styles.css"> in your html file does not require a loader in webpack.config.js.
It sounds like you're getting a console error in the browser that says 404 file not found.
If that i the case then the href="/some/path/styles.css" part is not pointing to your file.
Furthermore, I assume, ( I know, dangerous... ) that you are trying to serve your css file from a public folder, and that your server possibly has this folder set as a static asset folder. If that is the case, you do not need to include that folder name in the path you used in the href of your link.
Hope this helps!
All you need to do is explicitly require CSS or Sass dependencies like you would its JS dependencies, and Webpack will build a bundle that includes everything you need. For Example
src/app/index.js
import 'bootstrap/dist/css/bootstrap.css'; //bootstrap installed via npm
import '../css/custom.css'; // just an example path
For more detail explanation Webpack Embedded Stylesheets
I am using grunt connect server for maven angular project. I have some static files outside the angular folder. Is there way to redirect every call for file "redirect_folder/x/y/file.txt" to "target_folder/x/y/file.txt" just grunt need to change redirect_folder word for my static folder path.
Edit:
I copied the user.json to style folder, and trying to make style folder as a base but it doesnt works:
$http.get('user.json')
grunt.js:
grunt.initConfig({
connect: {
all: {
options: {
base: ['/media/data/project/src/main/webapp/resources/ngSrc/app'],
port: 10100,
hostname: "0.0.0.0",
livereload: true,
combine : [ '/media/data/project/src/main/webapp/resources/ngSrc/app', '/media/data/project/src/main/webapp/resources/ngSrc/app/style']
}
}
},
...
I am trying to take my front-end workflow a step higher with Grunt tasks.
I have set up a couple of tasks in my Gruntfile.js. For now there are only grunt-contrib-sass and grunt-contrib-watch so that .css files are automatically recompiled whenever I make a change to my .sass files.
What I want to achieve is the following:
I want to add a task that would listen to my local server that was started with UniServerZ/XAMPP/WAMP or any other provider. I want to trigger a reload each time I edit any file in the server base directory.
I know that it is quite easy to set up such a task with, e.g. 'grunt-express' which starts a local server for you, but I really want to listen to a server started with UniServerZ/XAMPP/WAMP.
I will be grateful to see example configuration for such scenario if it is possible to achieve it.
Here is how I did it with Wamp 2.2 on Windows 7.
First, you need grunt-contrib-watch properly setup with livereload. I also use grunt-sass and not grunt-contrib-sass, because grunt-sass use Libsass. LibSass is a C/C++ port of the Sass engine, and it is faster.
To install them, use these commands :
npm install grunt-contrib-watch --save-dev
npm install grunt-sass --save-dev
Here is an example of Gruntfile :
module.exports = function(grunt) {
grunt.initConfig({
watch: {
sass: {
files: 'folder/to/your/sass/**/*.sass',
tasks: ['sass:dist'],
options: {
livereload: true,
},
},
//Watch your theme files
livereload: {
files: ['pathToTheme/*.php', 'pathToTheme/img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
options: {
livereload: true
},
}
},
sass: {
options: {
includePaths: ['where/to/find/additional/#import/scss/files'],
outputStyle: 'nested',
imagePath: 'how/to/rewrite/image/path',
sourceMap: true
},
dist: {
files: {
'output/file.css': 'input/file.scss'
}
}
},
});
// Default task
grunt.registerTask('default', ['watch']);
// Load NpmTask
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
};
You could save yourself some time with load-grunt-tasks, and remove the manual loading of task :
require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks
Then I use the livereload plugin for firefox (or chrome or safari).
Start the grunt watch task, open your site on localhost, and click on the icon in your browser. Now if you edit a watched file, the page should update accordingly.
A solution exist to add the livereload js in your Wordpress automatically (in function.php):
if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
wp_enqueue_script('livereload');
}