When I do this, I refer to this article: WebPack builds vUE projects. Also check out yugosun’s blog in yugosun, you may not know what Vuejs are: To do good work, you must first do good work. But there are a few caveats:

1: When installing WebPack, if you are using webPack 4+, you will also need to install the CLI. Webpack installation:

NPM install webpack --save-dev or NPM I webpack --save-dev or yarn add webpack --save-devCopy the code

Webpack – CLI installation:

NPM install --save-dev webpack-cliCopy the code

/node_modules/. Bin /webpack./node_modules/. Bin /webpack. NPX can find where webPack is installed. However, NPX is unstable, because if your Node is installed and there are Spaces in a directory, NPX will not be found correctly.

For more information on the difference between YARN and NPM, see this article: YARN vs NPM: What you need to know.

2: After vue is installed, modify the content in main.js file, and add a new div with id app to the body in the index.html file, that is

<div id="app">{{msg}}</div>
Copy the code

NPM install –save-dev @babel/core NPM install –save-dev @babel/core

 resolve: {
    alias: {
   'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
}
Copy the code

4. Other Loaders and plugins are also used in this article. Of these, webpack-dev-server works well. For actual development, we need to deploy the code in the server rather than open the file directly in the browser. At this point we need to use webpack-dev-server for Webpack. It gives us a simple Web server that can live reloading. You can also add a script to the scripts of package.json to run the dev server directly:

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack-dev-server --open", "build": "Webpack"}, so that you can type NPM run dev directly on the terminal instead of webpack-dev-server.Copy the code

5: NPM init will generate package.json. NPM install will download and install the packages depending on the package.json file.

6: Because the build goals we need in the development and production environments are very different. We generally recommend writing separate WebPack configurations for each environment. We will use a tool called Webpack-Merge. For details, see the configuration of the WebPack production environment build. You can also import generic configuration files directly, using… For example, the following is the introduction of the common configuration file webpack.base.config.js in the development environment

var base = require("./webpack.base.config.js"); module.exports = { ... base, mode: "development", devtool: "inline-source-map", devServer: { contentBase: "./dist" }, module: { rules: [ ...base.module.rules, { test: /\.css$/i, use: ["style-loader", "css-loader"] } ] } };Copy the code

7: There are two similar suffixes save-dev and -dev when installing dependencies using NPM or YARN. Consulted a lot of data, everyone is generally explained like this:

–save: Saves the configuration information to pacjage.json. The default value is in the Dependencies node.

–dev: saves the configuration information in the devDependencies node.

–save-dev: saves configuration information to the devDependencies node of pacjage.json.

Dependencies: Runtime dependencies that are required in the production environment after publication. When you pack it, you pack it in.

DevDependencies: Development-time dependencies. The module is for development, not for release. It does not count when packing. For example, answer 1, answer 2, and answer 3

Use –save-dev for all webpack loaders and pligins installed. Vue, like the one we rely on in our project, needs to be used instead of –save-dev, we use –save.

8: If we set filename:[name][contenthash].js in the webpack.config.js configuration file, filename:[name][contenthash].js in the dist directory, The resulting file is main.x.js. The x here is a hash number, so what does that do?

Sometimes it would be slow to request all the files we need from the server each time we request access to a page. And sometimes it has been accessed before, the content is cached locally, and the content of this request has not changed, but still have to go to the server to get.

Using hash names avoids this problem. That is, if the CSS or JS file is updated, the file name will change. So when it does, it will also change where the import is used, and the next load will be updated instead of using the local cache. If no changes are made, the next request uses a cache (which is required by the HTTP protocol and must be supported by the browser) that reads the file directly from the local cache, saving time. Note, however, that index. HTML pages are not cached, and if the home page is cached, updates will not be available in real time.

9: Learned a new knowledge: hot deployment. In simple terms, you only want to refresh the changes locally, not globally. Use HotModuleReplacementPlugin that enable Hot Replacement Module (Hot Module Replacement), also known as HMR. However, the webPack website advises that you should never enable HMR in production, and that these are experimental and may be deprecated later.

Node.js package manager NPM: Node.js package manager NPM

Interviewer: Have you ever built a VUE development environment yourself? .

12: If you type a series of commands at the end of the project, you can create a script such as deploy.sh and execute the script sh deploy.sh.

Yugosun’s series of blogs: Vuejs you may not know are worth checking out.

The road to gold began