Starting and managing resources

Before I did not understand the relationship between Webpack and vue-CLI, I read the Webpack document and found that vue-CLI is to help you configure webpack, configure a configuration combined with VUE, if webpack is very good, then you can even ‘vue-CLI’ a project.

I. Initialization project:

Create a project folder, and then NPM init, NPM init -y, all yes, skip the enter step, initialize the project, and then a package.json file will be generated, which contains some configuration for the project, like some script operations, What is the build of the NPM run build, and the installed plugins and packages.

2. Install Webpack and webpack CLI locally

NPM install webpack webpack-cli –save-dev The new version of Webpack needs to work with webpack-CLI

Iii. Start formal construction of our project:

Create the index.html and SRC folder in the root directory, create the index.js file in the SRC folder, add two script tags to the HTML file, the first one is used to introduce Lodash, I don’t know what it does, All I know is that lodash was introduced here because it was used in index.js. Add private: True to package.json to make sure our package is private and remove main:index.js to prevent accidental release of my code. What do these two sentences mean? By publishing, I mean having NPM refuse to publish, which is a private repository. The main property is also used for publishing. When your package or library is published, others will default the main address after downloading it. Since the private property has been added, the main property is no longer useful, so it is deleted.

Lodash was introduced using script to introduce three pieces of information:

  • It is not immediately apparent that script execution depends on external extension libraries.
  • If the dependencies do not exist, or an order error is introduced, the application will not function properly.
  • If a dependency is introduced but not used, the browser is forced to download useless code.

Create a Bundle folder: Tweak the directory structure.

  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js
Copy the code

CDN references to LoDash are removed from HTML. What if loDash is used in index.js? This brings us to the package installation. NPM install –save lodash — NPM install –save lodash –save lodash And –save-dev is a package that is only needed in a development test environment. Once installed, just import _ from ‘lodash’ in the index.js file; That’s it, that’s your name, you can call it something else.

Change the reference to index.js to main.js in the current directory because you are going to use an operation, NPX webpack. Executing NPX webpack will take our script as the entry point and output it as main.js.

Open the HTML file and find that it can be used normally.

4. Use webpack.config.js configuration file:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
Copy the code

Js file named bundle.js and generated in dist folder. NPX webpack generates main.js directly from dist without webpack.config.js. If filename is changed to bundle.js, the bundle.js file is changed to bundle.js by default.

5, Modify package.json file, add NPM script:

{" name ":" webpack - demo ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" test ": "echo \"Error: no test specified\" && exit 1", + "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies" : {" webpack ":" ^ 4.0.1 ", "webpack - cli" : "^ 2.0.9", "lodash" : "^ 4.17.5"}}Copy the code

Instead of doing NPX webpack, do NPM run build. You can pass custom parameters to Webpack by adding two horizontal lines between the NPM run build command and your parameters, for example: NPM run build — –colors.

Through the previous configuration, we can only support JS files, HTML CSS etc is not supported. Index. HTML is created directly in the dist file, not generated during packaging. We’ll take it one at a time.

Load CSS:

NPM install –save-dev style-loader css-loader

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };
Copy the code

Import ‘./style.css’; The imported CSS file is added to the HTML head. Similarly:

npm install --save-dev file-loader

npm install --save-dev csv-loader xml-loader

        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /\.(csv|tsv)$/,
          use: [
            'csv-loader'
          ]
        },
        {
          test: /\.xml$/,
          use: [
            'xml-loader'
          ]
        }
Copy the code

Global Resources: The best thing about all of this is that by loading resources this way, you can group modules and resources together in a much more intuitive way. Instead of relying on the /assets directory, which contains all the resources, you combine them with your code. For example, a structure like this would be useful:

- + | -- - | - / assets/components + | | - / my - component + | | | - index. The JSX + | | | - index. The CSS + | | | - icon. The SVG + | | | - img.pngCopy the code

This configuration makes your code more portable because the existing unified placement results in tight coupling of all resources. If you want to use /my-component in another project, simply copy or move it to /components. As long as you have any external dependencies installed and you have defined the same Loader in your configuration, the project should work fine.

However, let’s say you can’t use the new development style and are stuck with the old development style, or you have resources that are shared across multiple components (views, templates, modules, etc.). You can still store these resources in a common base directory, or even use aliases to make them easier to import.