Remember a web pack

Time:2020-1-23

Remember a web pack

  • Preface

    • A company’s public number to do a H5 activity. Two simple pages, after writing, I want to do compression, or put it directly on the back, think about it later, or to do the compression, just to re learn webpack, previously used webpack is written by people’s hands, used directly, change, no problem, but to re build one. Set, it seems not very good, so take advantage of this opportunity to experiment
  • Project details

    • Because it’s only a small activity page and only three pages, at the beginning of writing, the framework only uses zepto.js, and needs a screenshot function, all of which uses html2canvas again. What’s more, I didn’t use webback to develop in the simplest way, with nginx
    • Directory structure:

      • Less writes styles with less and compiles CSS in real time
      • JS logic control
      • LIBS is used to put third-party libraries
      • Config has two files, utils.js and api.js
      • Image for pictures
      • HTML files in the outermost layer
  • Start webback configuration

    • npm initInitialize
    • npm install --save-dev webpack webapck-cli(Note: the webpack version uses 4.39.2)
    • Add according to the document in the root directorywebpack.config.jsconfiguration file
    • Add in package.json"build": "webpack --config webpack.config.js"
    • Configure portal file:

      • Since I have three pages here, I have configured three entry files, corresponding to my three JS files
      • And because of the addition of webpack, the SRC directory is added, and JS is placed under Src
      • Remember a web pack
    • To configure an export file:

      • Remember a web pack
      • When it’s done, go aheadnpm run buildOnly three JS files are packed out, which is not what I want at all. Where is HTML, so Baidu. Originally, HTML template is needed, which needs to be usedhtml-webpack-pluginPlug-in unit
    • To configurehtml-webpack-pluginPlug-in unit

      • According to the document, the configuration is as follows:
      • Remember a web pack
      • This plug-in has been used three times and three HTML files have been generated
      • Filename: the name of the packaged HTML file
      • Template: HTML file template
      • Minify: compress related parameters
      • Chunks: the JS file to be imported is the name of the previous entry file configuration. Just write the corresponding one
    • Modularize all dependent resources

      • All the resources introduced by index.html are introduced in index.js
      • Remember a web pack
      • When I went to pack again, I reported an error. After reading the error information carefully, I found that I needed various loaders
    • Loader configuration:

      • Here I use style loader, CSS loader, less loader, HTML loader, URL loader
      • The first three are used to process CSS style, and the URL loader is used to process image path. The configuration is as follows:
      • Remember a web pack
      • Let’s focus on HTML loader

        • Since the original content is written in the index.html page, it is not good to use index.html as a template and put the content in index.html at this time. Therefore, the new view file adds index.html under the file. Put the content in this file. And add a new line of such code in index.html of the template<%= require('html-loader!./view/index.html') %>, introduce the code in view / index.html. It looks clean
    • JS compression:

      • Useuglifyjs-webpack-pluginCompress
      • After packaging, the test found that the style loading is particularly slow. The CSS has not been separated, but has been packaged in index.js. So we need to separate CSS again
    • Separation of css:

      • Usemini-css-extract-pluginSeparate
      • It is recommended in the document that webpack4x use this plug-in and the lower versionextract-text-webpack-plugin
      • At this point, configure a web pack dev server for development and debugging. It seems that it’s not too much trouble, and it’s not bad for this step, and it can also abandon nginx
    • Configure webpack dev server as follows:

      • Remember a web pack
  • Postscript:

    • For the first time, it takes two or three hours to remember how to solve problems. It’s worth the time. At least, the understanding of webback has been deepened

Recommended Today

Review of SQL Sever basic command

catalogue preface Installation of virtual machine Commands and operations Basic command syntax Case sensitive SQL keyword and function name Column and Index Names alias Too long to see? Space Database connection Connection of SSMS Connection of command line Database operation establish delete constraint integrity constraint Common constraints NOT NULL UNIQUE PRIMARY KEY FOREIGN KEY DEFAULT […]