src/fonts/open-sans/OpenSans-ExtraBold.ttf 1:0 node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB ĮRROR in. node_modules/jquery/dist/jquery.js 281 KiB node_modules/css-loader/dist/runtime/getUrl.js 830 bytes node_modules/css-loader/dist/runtime/api.js 1.57 KiB node_modules/css-loader/dist/runtime/*.js 2.38 KiB src/fonts/open-sans/OpenSans-ExtraBold.ttf 352 KiB Now let’s run webpack again using npm run build and see what happens: > build /home/jim/Downloads/webpack-static-site-exampleĪsset bundle.js 349 KiB (name: main ) Let’s install both: npm install -save-dev css-loader style-loader Of the two, css-loader transforms CSS to a JavaScript module, and style-loader injects the CSS that’s exported by the JavaScript module into a tag at runtime. To get it running on your machine, you should clone the project from GitHub and install the dependencies:Īs you can see, I’ve specified two loaders: css-loader and style-loader. We’ll also need a skeleton project to work with. Personally, I much prefer this second method, as it allows you to switch between multiple versions of Node and it negates a bunch of permissions errors, which might otherwise see you installing Node packages with admin rights. If you haven’t got Node yet, you can either download it from the Node website, or you can download and install it with the aid of a version manager. The first thing you’ll need is to have Node and npm installed on your computer. Whether or not you employ any of these techniques in your own projects is down to you, but by following along you’ll get a firm understanding of what webpack does, how it does it and whether it’s a good fit for you. This means you can write JavaScript using the latest, most up-to-date syntax (although this might not be fully supported yet), then serve the browsers ES5 that will run almost everywhere.Īnd finally, it’s a fun learning exercise. For example, in this article I’ll demonstrate how to have webpack transpile modern JavaScript to ES5. Webpack also makes it easy to minify your code, further reducing its size, and it lets you write your assets in whatever flavor you desire.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |