Shulou(Shulou.com)06/03 Report--

This article mainly shows you "webpack building vue environment Times error how to do", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "webpack build vue environment Times error anomaly how to do" this article.

The first is to configure package.json// to automatically configure npm init-y

Everything is fine.

Then install the webpack tool npm install webpack webpack-cli-- save-dev / / or npm i webpack webpack-cli-D to run the webpack test

At this step, when I typed webpack on the command line and pressed enter, I began to report an error frantically.

Then the fastest way is to delete the file and reinstall it.

After doing it again, it is confusing to report the same mistake.

After the webpack-V output, it was found that there was no output even for the version number.

After thinking about it, I thought it was most unlikely that webpack did not have a global installation, because it had been used before.

Then reinstall webpack and webpack-cli or the previous instructions

Then create the src file manually

4. Run the webpack test

CommonJS specification: based on server-side modularization specification, node output

Throw: modules.exports introduces: require

ES6 module:

Import xxx from''export default {}

Because webpack only supports the introduction of js and json files by default, if you want to introduce other file types such as .css .png.html into JS

When parsing, you need to install a suitable loader for parsing processing.

Configure various loader (file parsers)

Installation of babel related

Install babel and react related loaders

Cnpm I babel-loader @ babel/core @ babel/preset-env-D

Install the css loader

Npm I css-loader style-loader-Dcnpm I css-loader style-loader-D

Install the HTML plug-in

Npm I html-webpack-plugin-Dcnpm I html-webpack-plugin-D

PS: [depending on the difference between installing to a development environment and a production environment]

The development environment, that is, the dependencies required in the coding phase of the project, do not need references after launch, such as webpack build tools, babel loaders, etc., installed using the-- save-dev or-D command.

In the production environment, the stage of formal provision of external services after the project is launched still needs to rely on support, such as jQuery libraries, routing, etc., installed using the-- save or-S command

Create a webpack.config.js configuration file in the root directory of the project, and complete the following configuration in turn:

(1) configuration entry (entry) module.exports = {entry:'./src/index.js'} (2) configuration exit (output) const path = require ('path'); module.exports = {/ /. Output: {path: path.resolve (_ _ dirname, 'dist'), filename:' main.js'}} (3) configure loader (loader) module.exports = {/ /. Module: {rules: [{test: /\ .css $/, use: ['style-loader','css-loader']}, {test: /\ .js? $/, / / regular exclude: / node_modules/ of the jsx/js file / / exclude node_modules folder use: {/ / loader is the configuration option for babel loader: 'babel-loader', options: {/ / babel escape babelrc: false Presets: [[require.resolve ('@ babel/preset-env'), {modules: false}]] CacheDirectory: true}]} (4) configure plug-in (plugin) const HtmlWebPackPlugin = require ('html-webpack-plugin') Module.exports = {/ /... Plugins: [new HtmlWebPackPlugin ({template: 'public/index.html', filename:' index.html', inject: true})]}

Execute the packaging command

Npx webpack-mode development

Configure the npm run build command to perform the packaging operation:

/ / add the build entry {"scripts": {"build": "webpack-- mode production"}} to the package.json file

Execute the packaging command:

Build local server with npm run build

Installation dependency

Cnpm I webpack-dev-server-D

Configure local service related information in the webpack.config.js file

Module.exports = {/ /... DevServer: {contentBase:'. / dist', host: 'localhost', port: 3000}}

Configure startup commands in the package.json file

{"scripts": {"start": "webpack-dev-server-- mode development-- open"}}

Execute the start service command

Npm start

And then some integration.

Integrate with vue

Vue-loader: parse vue file vue-template-compiler install: npm install vue-loader vue-template-compiler-D configuration webpack file: {test:/\ .vue $/, use: ['vue-loader']}, instantiate vueLoaderPlugin plug-in const {VueLoaderPlugin} = require (' vue-loader') add plug-in instantiation:}, plugins: [new VueLoaderPlugin ()]

Integrate with less

Installation: npm install less-loader less- D configuration: module: {rules: [{test:/\ .less $/, use: ['style-loader','css-loader','less-loader']},]}

Integrate with sass

Installation: npm install sass-loader node-sass-D configuration: module: {rules: [{test:/\. (scss | sass) $/, use: ['style-loader','css-loader','sass-loader']},]}, sass common syntax: https://www.cnblogs.com/chyingp/p/sass-basic.html

And vue-router

Installation: npm install vue-router-D

Integration with vuex

Installation: npm install vuex-D

The above is all the content of this article "what to do if there is something wrong with webpack Building vue Environment Times". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.