I am trying to wrap my head around webpack and how it handles resources.
Here is my project structure:
/dist (files that can be pushed to server) /src /styles s.less /js main.js a.js /img splash.png profile.html entry.js (webpack entry file)
What am I trying to do:
- LESS files compiled in CSS and packaged with JS
- Images are either copied
/src/img -> /dist/img with their original names (good for large images), or base64'd and placed in a kit (good for icons) - htmls are copied
/src/ -> /dist/ with their original names - every time I change html or anything in styles or js it does the above steps and reloads the page in the browser
Basically, I need to be able to see the current state of the application without even touching the browser window.
What i tried
I ran
webpack-dev-server --content-base /dist --hot-loading (with and without --hot-loading ), but this does not reload CSS / LESS changes
above along with webpack --watch , this solved the CSS reload, but I still need to copy the html and images to / dist manually
above two along with a gulp task that looks at html and images and copies them to dist. This is a solution to the copy problem, but it does not notify webpack-dev-server of the changes, so I need F5 every time I change the HTML; he defeats the whole goal of a hot reboot.
I tried adding file-loader , but this does not work for HTML, as it creates a JS script that requires an html file
Here is my entry.js
require("./src/js/main"); require("./src/css/s.less");
And webpack.config.js:
var path = require('path'); var webpack = require("webpack"); module.exports = { entry: "./entry.js", output: { path: path.join(__dirname,'/dist/js'), filename: "bundle.js" }, plugins: [ new webpack.ProvidePlugin({ $ : "jquery", jQuery : "jquery", "window.jQuery" : "jquery", "root.jQuery" : "jquery" }) ], module: { loaders: [ { test: /\.less$/, loader: "style!raw!less" } ] } };
Is there a way to solve this problem using a web package?
source share