webpack.config.js<\/code> files in your theme and paste in the code below:<\/li><\/ol>\n\n\n\n{\n \"name\": \"my-theme\",\n \"private\": true,\n \"dependencies\": {},\n \"devDependencies\": {\n \"browser-sync\": \"^2.26.12\",\n \"browser-sync-webpack-plugin\": \"^2.2.2\",\n \"css-loader\": \"^4.3.0\",\n \"file-loader\": \"^6.1.0\",\n \"mini-css-extract-plugin\": \"^0.11.2\",\n \"sass\": \"^1.53.0\",\n \"sass-loader\": \"^10.0.2\",\n \"url-loader\": \"^4.1.0\",\n \"webpack\": \"^4.44.1\",\n \"webpack-cli\": \"^3.3.12\"\n },\n \"scripts\": {\n \"build\": \"webpack --mode production\",\n \"dev\": \"webpack --mode development --watch\"\n }\n}\n<\/code><\/pre>\n\n\n\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst BrowserSyncPlugin = require('browser-sync-webpack-plugin');\nvar path = require('path');\n\n\/\/ change these variables to fit your project\nconst jsPath= '.\/js';\nconst cssPath = '.\/css';\nconst outputPath = 'dist';\nconst localDomain = 'http:\/\/mysite.local';\nconst entryPoints = {\n \/\/ 'app' is the output name, people commonly use 'bundle'\n \/\/ you can have more than 1 entry point\n 'app': jsPath + '\/app.js',\n};\n\nmodule.exports = {\n entry: entryPoints,\n output: {\n path: path.resolve(__dirname, outputPath),\n filename: '[name].js',\n },\n plugins: [\n new MiniCssExtractPlugin({\n filename: '[name].css',\n }),\n\n \/\/ Uncomment this if you want to use CSS Live reload\n \/*\n new BrowserSyncPlugin({\n proxy: localDomain,\n files: [ outputPath + '\/*.css' ],\n injectCss: true,\n }, { reload: false, }),\n *\/\n ],\n module: {\n rules: [\n {\r\n test: \/\\.s?[c]ss$\/i,\r\n use: [\r\n MiniCssExtractPlugin.loader,\r\n 'css-loader',\r\n 'sass-loader',\r\n ],\r\n },\r\n {\r\n test: \/\\.sass$\/i,\r\n use: [\r\n MiniCssExtractPlugin.loader,\r\n 'css-loader',\r\n {\r\n loader: 'sass-loader',\r\n options: {\r\n sassOptions: { indentedSyntax: true },\r\n },\r\n },\r\n ],\r\n },\n {\r\n test: \/\\.(jpg|jpeg|png|gif|woff|woff2|eot|ttf|svg)$\/i,\r\n use: 'url-loader?limit=1024',\r\n },\n ]\n },\n};<\/code><\/pre>\n\n\n\nThe code above assumes your theme’s structure looks like below. If it’s different, change the variables in Line 5 accordingly:<\/p>\n\n\n\n
\/\n\u251c\u2500\u2500 css\/\n\u2502 \u251c\u2500\u2500 app.css\n\u251c\u2500\u2500 js\/\n\u2502 \u251c\u2500\u2500 app.js\n\u251c\u2500\u2500 dist\/\n\u251c\u2500\u2500 index.php\n\u251c\u2500\u2500 page.php\n\u251c\u2500\u2500 ...<\/code><\/pre>\n\n\n\nOpen command-prompt \/ terminal in your theme and run the command below<\/strong>. For Windows users, you might see an error saying unable to remove the directory. Simply rerun the command to solve that.<\/li><\/ol>\n\n\n\nnpm install<\/code><\/pre>\n\n\n\nTo start compiling, run the command below. Every time you save your JS, it will automatically re-compile.<\/li><\/ol>\n\n\n\nnpm run dev<\/code><\/pre>\n\n\n\nBefore launching, you need to minify the code<\/strong>. To do this, you need to quit the dev<\/code> command, then run:<\/li><\/ol>\n\n\n\nnpm run build<\/code><\/pre>\n\n\n\n3. Compiling CSS or Sass<\/h2>\n\n\n\n By default, Webpack only supports JS files. But if you followed our setup above, it has extra packages to handle CSS or Sass.<\/p>\n\n\n\n
There are 2 ways of compiling them. The first way<\/strong> is to directly import them in your JS:<\/p>\n\n\n\nimport '..\/css\/style.sass'\n\n\/\/ ...\n<\/code><\/pre>\n\n\n\nThe second way<\/strong> is to add a new entry point in your config:<\/p>\n\n\n\n\/\/ ...\n\nconst entryPoints = {\n 'app': jsPath + '\/app.js',\n 'style': cssPath + '\/style.sass',\n};\n\n\/\/ ...<\/code><\/pre>\n\n\n\nThe first way makes more sense if the CSS is related to the script.<\/p>\n\n\n\n
Note<\/strong>: If you get this error: ENOENT no such file or directory, scandir<\/code>, you can fix it by running the command npm rebuild node-sass<\/code>.<\/p>\n\n\n\n4. CSS Live Reload<\/h2>\n\n\n\n Whenever you save your CSS, Webpack will automatically reloads it<\/strong>.<\/p>\n\n\n\nYou are probably using other tools to do this, but it’s nice to have everything in one place.<\/p>\n\n\n\n
We have included the packages to handle this in our current setup. Simply do these 2 steps in your webpack.config.js<\/code> to enable it:<\/p>\n\n\n\nUpdate localDomain<\/code> variable to be the local domain you use for your project.<\/li>Uncomment the new BrowserSyncPlugin<\/code> block.<\/li><\/ul>\n\n\n\nTo launch it, use the same command:<\/p>\n\n\n\n
npm run dev<\/code><\/pre>\n\n\n\nCommand Line of Browser Sync<\/figcaption><\/figure><\/div>\n\n\n\nIf you open your site in localhost:3000<\/code>, any updated CSS will be reloaded.<\/p>\n\n\n\nAlso, do you notice the External URL<\/strong>? You can open that on your mobile phone<\/strong> to view your local site! As long as both your computer and phone are under the same Wi-Fi.<\/p>\n\n\n\nNote<\/strong>: Depending on your router setup, the External URL might not work. I’m not familiar with networking stuff, so I don’t know the fix. Let me know in the comment if you found one.<\/p>\n\n\n\n5. Getting JS Library from NPM<\/h2>\n\n\n\n Most popular JS libraries are available in NPM. So you don’t need to save a local copy in your theme.<\/p>\n\n\n\n
Simply Google it<\/strong> to know whether it’s available as NPM or not.<\/p>\n\n\n\nIn our example, js-datepicker<\/code> and swiper<\/code> is available as NPM. So we can install them by running these 2 commands (in your theme directory):<\/p>\n\n\n\nnpm install --save js-datepicker\n\nnpm install --save swiper<\/code><\/pre>\n\n\n\nNow, we update their import references from this:<\/p>\n\n\n\n
import datepicker from '.\/js-datepicker.js';\nimport swiper from '.\/swiper.js';<\/code><\/pre>\n\n\n\nInto directly using the package’s name:<\/p>\n\n\n\n
import datepicker from 'js-datepicker';\nimport swiper from 'swiper';\n<\/code><\/pre>\n\n\n\nConclusion<\/h2>\n\n\n\n I hope this convinces you to start using Webpack in your project. Unless you’re doing minimal customization to a theme, this will serve you well.<\/p>\n\n\n\n
There are limitless possibilities with what you can do with Webpack. I believe this tutorial is good enough for you to be able to experiment further.<\/p>\n\n\n\n
Leave a comment below if you have any question regarding Webpack. I’m not a pro at it, but will try my best in answering yours.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Does a WordPress developer need to know Webpack? You might think it is unnecessary and too complex. So I will show you how useful it is for developing a theme.<\/p>\n","protected":false},"author":1,"featured_media":1920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[32,50],"class_list":["post-1891","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-javascript","tag-webpack"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1891"}],"version-history":[{"count":15,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1891\/revisions"}],"predecessor-version":[{"id":2171,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1891\/revisions\/2171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1920"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/11\/webpack-browsersync.jpg\")