Warehouse addresses for the examples used in this article:gayhub

HtmlWebpackPlugin is used to generate an index. HTML file above, and the plug-in automatically adds packaged resources to the index. HTML file, so that we can open the index. HTML and see the js execution effect in the browser. In this section we’ll use Webpack Loaders to handle the other three types of files we’ll use in our work: images, styles, and fonts.

Starting with this section, the test items in each section will be placed as the project resource types become more complexdemo/Is no longer the document root directory.

Loaders

Loaders is very simple, with three simple points:

  • You can use Loaders to package any static resource other than Javascript
  • Writing a Loader in Node.js is easy
  • Loader can be activated in either of the following ways:
    • Add in the import statementloaderName!, such asimport 'style-loader! css-loader? modules! ./css/test.css'
    • rulesFor details, see the following

Processing images

file-loader

yarn add file-loader
Copy the code

Usually, we just need to copy the image to (package) the target directory, in which case we use File-laoder

{
  test: /\.(png|jpe? g|gif|webp)$/.use: [{loader: 'file-loader'.options: {
        // File name
        name: '[name].[ext]'.// Output path
        outputPath: 'imgs/'}}}]Copy the code

After executing the webpack command, we can see that the image has been packed into the dist/imgs/ directory with the name unchanged.

url-loader

yarn add url-loader
Copy the code

When our image file has some small tags, if each small tag is requested independently, it is obviously a waste of bandwidth, which is not the rule. At this point we need to have a Sprite image like solution, integrating multiple small images into one request. Url-loader can do this, but unlike Sprite, it converts base64 encoded images that are smaller than the specified size into packaged code.

{
  test: /\.(png|jpe? g|gif|webp)$/.use: [{loader: 'url-loader'.options: {
        // File name
        name: '[name].[ext]'.// Output path
        outputPath: 'imgs/'.// Images smaller than 10K are base64 encoded
        limit: 10240}}}]Copy the code

After executing the webpack command, we can see that only the doraemon.jpg image is packaged into the dist/imgs/ directory, and the other five small images are packaged into A string of Base64 code (in dist/dist. Js).

  • Graphs greater than 10K

    / * * * / "./ SRC /imgs/ doraemon. JPG":
/ *! * * * * * * * * * * * * * * * * * * * * * * * * * * *! * \! ***./ SRC /imgs/ doraemon. JPG ***! A \ * * * * * * * * * * * * * * * * * * * * * * * * * * * /
/ *! no static exports found */
/ * * * / (function(module, exports, __webpack_require__) {

eval("Module. exports = __webpack_require__.p + \"imgs/ doraemon.jpg \"; \n\n//# sourceURL=webpack:///./src/imgs/%E5%A4%9A%E5%95%A6A%E6%A2%A6.jpg?");

/ * * * / }),
Copy the code

  • Graph less than 10K

    / * * * / ". / SRC/imgs/share. PNG":
/ *! * * * * * * * * * * * * * * * * * * * * * * * * *! * \! / SRC /imgs/ share.png ***! A \ * * * * * * * * * * * * * * * * * * * * * * * * * /
/ *! no static exports found */
/ * * * / (function(module, exports) {

eval("module.exports = \"data:image/png;base64,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\"\n\n//# sourceURL=webpack:///./src/imgs/%E5%88%86%E4%BA%AB.png?");
/ * * * / })
Copy the code

Processing style

If we don’t use loader to handle styles, You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

CSS

yarn add css-loader style-loader
Copy the code
  • css-loaderParsing CSS files
  • style-loaderInsert the style into the DOM

Loader executes from right to left and from bottom to top

{
    test: /\.css$/.use: [
        'style-loader'.'css-loader']}Copy the code

At this point, executing webpack will pack correctly, but instead of generating a.css file under dist/, the style is inserted as a style tag in the head tag of index. HTML (viewed in the browser console, the style file is in JS before insertion).

CSS preprocessor

Since I started using the preprocessor in my project after watching the “Gao-fang-ele. me” course taught by Huang Yi, I prefer stylus, which is also used in the examples in this article.

stylus-loaderExists in the default projectstylusDependency, so installstylus-loaderDon’t forget to installstylus

yarn add stylus stylus-loader css-loader style-loader
Copy the code
{
    test: /\.styl(us)? $/.use: [
        'style-loader',
        {
            loader: 'css-loader'.options: {
                importLoaders: 1 // Number of loaders executed before CSS-loader}}, {loader: 'stylus-loader'.options: {
                preferPathResolver: 'webpack' // Prefer webpack for path resolution. Use the stylus-Loader for path resolution if not found}}}]Copy the code

PostCSS

A few years ago there was a real pain in writing CSS, you had to prefix certain properties differently for different browsers, like -moz-transform for Firefox and -ms-transform for IE, but with PostCSS you just had to write unprefixed properties, PostCSS prefixes your CSS properties based on data from Can I Use.

yarn add postcss-loader -D
Copy the code
{
    test: /\.styl(us)? $/.use: [
        'style-loader',
        {
            loader: 'css-loader'.options: {
                importLoaders: 2 // Number of loaders executed before CSS-loader}},'postcss-loader',
        {
            loader: 'stylus-loader'.options: {
                preferPathResolver: 'webpack' // Prefer webpack for path resolution. Use the stylus-Loader for path resolution if not found}}}]Copy the code

PostCSS Configuration file postcss.config.js for automatic completion (autoprefixer plug-in required)

yarn add autoprefixer -D
Copy the code

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')]}Copy the code

In this case, run the webpack command. Transform rotate(180deg) is translated into -webkit-transform: rotate(180deg). transform: rotate(180deg); .

Two points to note:

  • postcss-loaderIn the order ofcss-loaderPrevious Execution
  • This can be configured in Webpack configuration JSpostcss-loaderPostCSS is configured using options, but it is recommended to add it in the project root directorypostcss.config.jsConfiguration files that make it easier for others to know that you are using PostCSS.

Separate style files from JS

As mentioned above, style-loader inserts styles into HTML files, which reduces the number of requests. However, normal project style files can take up quite a bit of volume. Remember that our style files are stored in JS files before we insert index.html, so JS files can be quite large, and we may need a clearer structure of the product. So you should also know how to separate styles from JS – using the MiniCssExtractPlugin.

yarn add mini-css-extract-plugin -D
Copy the code

Replace style-loader with MiniCssExtractPlugin loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [{test: /\.styl(us)? $/.use: [{loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '.. / '.hmr: process.env.NODE_ENV === 'development'.reloadAll: true}, {},loader: 'css-loader'.options: {
                        importLoaders: 2 // Number of loaders executed before CSS-loader}},'postcss-loader',
                {
                    loader: 'stylus-loader'.options: {
                        preferPathResolver: 'webpack' // Prefer webpack for path resolution. Use the stylus-Loader for path resolution if not found}}]}],},plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'.chunkFilename: 'css/[name].css',})]};Copy the code

After executing the webpack command, you can see that main. CSS is generated in the dist/ CSS directory and introduced in index.html.

Working with font files

Font files are similar to images, just copy and place in the dist/fonts/ directory, still using file-loader/url-loader.

{
    test: /\.(woff2? |eot|ttf|otf|svg)(\? . *)? $/i.use: {
        loader: 'url-loader'.options: {
            limit: 4096.name: '[name]_[hash:5].[ext]'.outputPath: 'fonts/'}}}Copy the code

By the way, SVG is now more popular for drawing ICONS, and drawing paths existiconfong.jsIn (Ali icon library download example), at this time remember not toiconfong.jsOn thesrc/Directory, because of packagingiconfont.jsIt doesn’t make any sense. It just takes longer to pack. It should be placed in a static directory without packaging, such as vue-CLI 2static/And the vue – cli 3public/And reference them in HTML to use when packagingCopyWebpackPlugin 把 static / publicCopy the entire folder todist/.

Reference documentation

  • [ Webpack Docs ] Loaders