A webpack configuration for webdevs using scss, postcss, html and js.
Based on HtmlWebpackPlugin.
Comes with postcss autoprefixer.
The following setup will only work on a specific file structure:
src
|_ html
| |_ index.html
| |_ ....html
|
|_ img
|_ svg
|_ scss
|_ css
|_ js
|_ vid
node_modules
|_ ...
dist
|_ index.html
|_ html
| |_ ....html
|
|_ img
|_ svg
|_ scss
|_ css
|_ js
|_ vid
All the media folders (img, svg, vid) should have their contents placed there directly, without creating subfolders. This is important to ensure the resolve
in webpack.config.js
is working correctly.
The webpack output will be put into dist/
. Webpack will place index.html
directly under dist/index.html
. All other assets will be placed in the corresponding folder in dist/
.
At this time of writing sass-loader
does not work with url()
references in mixins Problems with url(...). Thats why I added a resolve to webpack.config.js
.
Therefore it is important that any relative paths in scss files are rewritten to make use of webpack resolve.
Example:
src/img/...
file: url(~img/...)
. (It doesn't matter how deep you are in the subfolders of src
)You will find a node module called @csstools/normalize.css
after npm install
. If you want to use normalize.css
, please import it in your scss files:
@import '~@csstools/normalize.css';
If you have more than one html file (e.g. index.html
, file2.html
etc.) then you have to create a HtmlWebpackPlugin instance for each file. A comment about how to do this can be found in webpack.config.js
.
References made by cross-site anchor tags can currently not be resolved. Anchor tag relative paths should be relative to the locations the html files are going to have in dist/
.
git clone --depth=1 --branch master https://github.com/benjaminpreiss/webpack_conf.git .
git remote set-url origin <YOUR-GITHUB-REPO>
package.json
:
npm install
defaults
last 4 versions
git clone <EXISTING-GITHUB-REPO> .
git checkout -b <YOUR-VERSION-NUMBER>
git rm -r *
git remote add webpack_conf git://github.com/benjaminpreiss/webpack_conf.git
git fetch --depth=1 webpack_conf master
git merge --allow-unrelated-histories -m "Merging webpack_conf/master branch into current branch" origin/master
git remote remove webpack_conf
package.json
:
npm install
defaults
last 4 versions
npx webpack
npx jslint