Vue+webpack+vs Code entry Simple project configuration

For convenience, the compiler here chooses vs Code (Visual Studio code);

Open vs Code, choose your own workspace, then create a new folder as a folder for our project, then show time;

　　Ctrl + ' Open command line to operate

First, initialize

A. Enter the project folder you just created

B. Initialize our project,NPM init; Initialize to a NPM project; After the carriage return some options, direct enter select default,

　　

Input Yes, enter;

OK, now we have one more Package.json file under our project folder.

Second, install the required package

A, since we want to configure the Vue+webpack, then the next installation;

　　　　NPM I [email protected] Vue Vue-loader

(I:install; @3.11.0 specified a version, the latest version of 4, the operation is a discrepancy)

　　　　After installation, the command line and the project folder, as can be seen from the warning content, we also need to carry out dependent installation;

b, installation of Css-loader and Vue-template-compiler;

　　　　NPM I css-loader Vue-template-compiler

OK, there are a few warn. There are no installation prompts for third-party dependencies, and we can ignore

The project is initialized and the installation package is complete, and then we can write some content in the project.

Iii. contents of the project

A, new folder src, as the source folder

B. Create a new Vue file in src,app.vue

　　

The entire App.vue file is a component of template, script, style

①<template></template>: Writing HTML content to show something

②<script></script>: Write a section that controls the changes in the display content

③<style></style>: The CSS style is written

　c, simply write the content

　　

Data as part of component initialization, data for {{text}}

When writing content, the new installation vs code will feel not convenient, what hints are not, this is what to do, then according to the Ctrl+shift+x expansion in the installation of a few commonly used bar;

Now we're done with a simple component, but it's definitely not going to work.

Iv. Configuration Files

A, new configuration file:webpack.config.js, configure

①Const PATH = require (' path '), import a basic package inside the Nodejs, used to process the path, this way use absolute path

②entry: Declaration Entry

Since the declaration of the entrance, then we need a portal file, then a new index.js file in src, as a portal file;

The component is then mounted to the portal file;

a) referencing Vue's class library in Index.js import vue from ' Vue '

b) Refer the App.vue component again to the 　　　　　　 import App from './app.vue '

c) Create a node to display after the content is rendered

　　　　　　 Const ROOT = document.createelement (' div ')Document.body.appendChild (Root)D) New a Vue object that declares a render method that receives an H parameter that renders the contents of our Component appNew Vue ({render: (h) = + H (App)})

e) Call the API,$mount (); mount the rendered content above the node we created in the third step

③ back to webpack.config.js file, write to the portal file:entry:path.join (__dirname, ' src/index.js '); (__dirname: for root directory)

④ Export File configuration:

　　　　 output:{filename: ' bundle.js ',//output file namepath:path.join (__dirname, ' dist ')//output file path}

⑤ added a sentence in Package.json :

　　　　

This allows us to run the code via NPM run start

Five, run debugging

　Run with npm run start

　　

Error, tell us we need to declare a loaderfor . Vue file;

module:{
Add rule, rules rules:[{test:/.vue$/,    //file type, Regular loader: ' Vue-loader '   //load used ER}]}

Run npm run start again; OK, no more errors!

bundle.jsis generated in the Dist , the file is opened, including, Webpack inherent code, used to deal with the module dependencies, the following are all vue.js source code, of course, we write codes in the inside;

Above, we configured the Webpack, loaded the. vue file; What about our Css,image file? Continue with the configuration below

One, configure loader in configuration file

　　A, CSS files and picture files

Module.exports = {Entry:path.join (__dirname, ' src/index.js '), output:{filename: ' bundle.js ', Path:path . Join (__dirname, ' Dist ')}, module:{

 　 //Regular plus \ Perform a translation of the.rules:[{test:/\.vue$/, Loader: ' Vue-loader '}, { test:/\.css$/, use:[//This side uses use, array to write form' Style-loader ', ' Css-loader '}, {test:/\. ( Gif|jpg|png|svg|jpeg) $/, use:[{loader: ' Url-loader ',//Array Write object form, in order to increase configuration parametersoptions:{limit:1024,//Less than 1024KB image to base64 format code, exists in JS, does not generate filesName: ' [name]. [ext] '//The name of the output file, [name] According to the original, [ext] Extension}                    }                ]            }        ]    }}

The configuration is complete, the corresponding loader;url-loader of the installation depends on the File-loader, so also installs;

　　

OK, the installation is complete!

Second, write CSS files and pictures

　　Create a new Assets folder in the SRC folder and create a new images and a styles folder in this folder, such as several pictures and a new test.css file.

　　　　　　

Rewrite test.css and index.js;

Running npm run start ;

OK no error, we can see in the Dundle.js file of our CSS files and pictures packaging;

About the picture does not seem to be exactly as we set the limit value as expected, the Base64 format, the problem, I am not clear, know the request to inform!!

Webpack-dev-server Configuration

　A, NPM i webpack-dev-server for installation

B, npm i cross-env installation, role: for different platforms to set the different environment variables to use

C. Modify the Scripts section of the Package.json file

D. Modify the webpack.config.js file

1)Const ISDEV = Process.env.NODE_ENV = = = ' Development ' declares a variable to determine the current environment variable, the return value is True or false

When you start the script, the preceding variables are stored in the Process.env object

　2) Add a bit of code　

if (isdev) {config.devserver = {port: ' 2018 ',          //Listening Port host: ' 0.0.0.0 ',       //can be accessed via intranet IP overlay:{//error display To page Errors:true,}}}

　

3) Further details to be changed

module.exports = {} object changed to const CONFIG = {} to define an object;

Well, to now, since as a front-end project, that is certainly not open, then you need an HTML page as the front page portal

1. Install the plugin,npm i html-webpack-plugin, and introduce the config file in const Htmlplugin = require (' Html-webpack-plugin ')

2. Using plugins

3. Add

  plugins:[        New Webpack. Defineplugin ({            ' process.env ': {                node_env:isdev? ') Development "': '" production "'         //used to differentiate development or production environment, choose different packaging mechanism            }        }),        new Htmlplugin ()    ]

4. Running npm run dev;

Under normal circumstances, the estimate will become the same as it is now:

　　

　　So what's the problem? In fact, this problem is still attributed to the version of the problem, our webpack with the @3.11.0 side of the installation of Webpack-dev-server is also version 3, that is the problem,

What to do? Let's compromise. NPM I [email protected] Reload the specified version 2

When you're done, npm run Dev runs;

OK, done, in the browser, accessed via localhost:2018

　　

Complete!!!

Ps:

　　VS code Download

Link: https://pan.baidu.com/s/1-PGMHzyMu-oF_LIYSFYEFg Password: fsx7

　　Example source code download

Link: https://pan.baidu.com/s/1Ll6Hb3aJuQrX8kD9QQwWKg Password: yykn

Vue+webpack+vs Code entry Simple project configuration