Basic configuration tutorial of Vue + webpack, vuewebpack

Basic configuration tutorial of Vue + webpack, vuewebpack

I recently studied webpack and followed the course by a single page application. Here I will record it. This section describes how to configure the webpack environment and the webpack dev configuration.

The record is rough and will be updated later.

1. Development Environment: vscode, node. js, vue. js, and webpack

Install node. js by yourself. Refer to the cainiao tutorial.

The IDE is VScode.

2. Project Initialization

Press ctrl + 'to open the vscode Console

 

Vscode Interface

2.1 install webpack vue-loader

npm initnpm i webpack vue vue-loader

The npm prompts you to depend on the warn and install it as prompted.

 

Warn

Install the corresponding loader

npm i css-loader vue-template-compiler

2.2 configure webpack to load the app. vue File

First, create the src folder, and create app. vue under it as the main code file, and index. js as the entry file.

 

Basic File

The content of the app. vue file is as follows:

<template> <div id="text">{{text}}</div></template><script> export default{ data(){  return {  text: 'abc'  } } }</script><style> #test{ color: red; }</style>

Under the src same-level directory

Create a webpack. config. js file, configure entry, and output

 

Create a package. json file and a webpack. config. js file.

// Webpack. config. jsconst path = require ('path') module. exports = {entry: path. join (_ dirname, 'src/index. js'), // call Index. js as the entry file output: {// The packaged js file will be in bundle. in js, this file will be automatically generated filename: 'bundle. js', path: path. join (_ dirname, 'dist') // used to store bundle. js file address, defined by myself}, module: {rules: [{test :/. vue $/, loader: 'vue-loader '}]}

Index. js file as entry

//index.jsimport Vue from 'vue'import App from './app.vue'const root = document.createElement('div')document.body.appendChild(root)new Vue({ render: (h) => h(App)}).$mount(root)

Configure the scripts command in the package. json file and add build

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" },

Enter the npm run build command on the console to pack the package.

 

After webpack is packaged

2.3 configure webpack to load non-Js files

Specific configuration of the webpack. config. js File

In webpack. config. add rules: [] to module: {} In js to set the file type to be recognized by webpack. The vue file type has been set before, so you need to add css/images.

//webpack.config.js module: { rules: [ { test: /.vue$/, loader: 'vue-loader' }, { test: /.css$/, use:[ 'style-loader', 'css-loader' ] }, { test: /\.(gif|jpg|png|svg)$/, use: [{  loader: 'url-loader',  options: {  limit: 1024,  name:'[name].[ext]'  } }] }] }

Run commands on the console to install the corresponding loader

npm i style-loader css-loader url-loader file-loader

Test the packaging Effect of Non-js files

Objective: To import the content of these non-js files in js Code

Create the test file test.css in the srcsubdirectory. And place JPG images in images for replacement (one can be used, and I will not delete emmm when I put more images)

 

File structure under src

Import these non-js files in Index. js.

// Index. jsimport Vue from 'vue 'import App from '. /app. vue 'import '. /assets/styles/test.css '// import css file import '. /assets/images/0.jpg '// import image const root = document. createElement ('div ') document. body. appendChild (root) new Vue ({render: (h) => h (App )}). $ mount (root)

Finally, runnpm run build Test results.

The image is similar to the preceding one.

2.4 about the css Preprocessor. Configuration and testing of stylus

Stylus is a pre-processor of css, and the file type is. styl. We will configure it here

First, add the following code in the rules: [] module of the webpack. config. js file to identify the. styl file.

//webpack.config.js  {  test:/.styl$/,  use: [   'style-loader',   'css-loader',   'stylus-loader'  ]  }

Then install the loader file required by stylus on the console.

npm i style-loader stylus-loader

Finally, runnpm run build Test results.

2.5 configure webpack-dev-server: specially used for packaging in the Development Environment

Because the formal environment is different from our development environment, you need to configure dev to differentiate

First, install webpack-dev-server

npm i webpack-dev-server

Modify the package. json file and add the dev configuration under build.

 

Package. json file configuration

Then, modify webpack. config. js

Add target: 'web' globally'

 

Config. js

Because this file must be used in both the development environment and the formal environment, you must add an environment judgment and add variables to identify different environments when running npm.

The commands in windows and mac environments are different. Here, the cross-env package is installed to make the commands the same in different development environments.

npm i cross-env

Modify the package. json file again and add the dev command on the "build:" and "dev:" lines.

Cross-env NODE_ENV = after development remains unchanged

 

Package. json file build

Then, make a judgment in the webpack. config. js file.

First, configure config. devServer

After webpack2, you can directly use config. devServer for configuration.

Several lines of code to change the file header

 

Add the following code at the end of the file

 

Config. devServer

Note:
Host: '0. 0.0.0 'do not directly write localhost, so that others' computers won't be able to access it; ports won't be occupied, otherwise they won't be able to open

Finally, install the html-webpack-plugin plug-in so that html can be used as an entry, automatically including JS

npm i html-webpack-plugin

Modify the webpack. config. js File

 

Config. js

 

Config. js

At this point, dev configuration is basically complete

Run npm run dev on the console

npm run dev

If the package is successful, you can view the effect in the browser,

If an error occurs, modify it as prompted. Check whether the port is in use. I used port 8000, And then I used port 8080.

Visit localhost: 8080 in the browser to view the rendering effect. The background image 0.jpg is my love Bean 23333. Pen core. Note that there is a red abc in the upper left corner.

 

Browser Effect

2.6 Add some things to config. js.

Finally, add something.

1) historyFallback :{}

Because we are doing a single-page application, we need to add an access address to index.html. This is ignored first.

2) Hot loading function.

Hot function to achieve partial rendering: for example, if you change the code of a component, the page only renders the component again instead of the whole page for rendering, and does not need to be refreshed.

3) Some plug-ins

Webpack. HotModuleReplacementPlugin () Start the hot Function

Webpack. NoEmitOnErrorsPlugin () removes unnecessary information

4) tool for debugging code functions in the browser

When debugging in a browser, the code will not be transcoded.

config.devtool = “#cheap-module-evel-source-map”

 

After the final configuration is complete, re-run npm dev once

npm run dev

After successful loading, you can test the hot loading effect in the browser and modify the text content in the app. vue file. Then you can see that the red word in the upper left corner has changed emmmm.

// App. vue <template> <div id = "text" >{{ text }}</div> </template> <script> export default {data () {return {text: 'abc' // open the browser and modify it to view the text change effect in real time. }}</Script> <style ># test {color: red ;}</style>

Summary

The above is the basic configuration tutorial of the Vue + webpack project introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!