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

Today, the editor will share with you the relevant knowledge of what the configuration method of vue-cli webpack is, the content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

We know that compared to vue, vue-cli is a scaffolding for building a single-page application of vue. We only need to type: vue init on the command line to automatically generate project templates. The more commonly used templates are webpack, webpack-simple, browserify and so on. Webpack, for example, plays a big role in programming, making our code block templates and eliminating the time it takes to build a project.

1 、 package.json

For this file, it is used to describe all the relevant information about the NPM package, and for the format, it is a strict json format. The npm install command can add or decrease the installation package for managing local files according to the configuration file, as shown in the following code:

{/ / from name to private are the configuration information of package, that is, the project description we entered in the scaffolding is "name": "shop", / / Project name: cannot be. (dot) or _ (underscore) beginning, cannot contain uppercase letters, have a clear meaning with the existing project name do not repeat "version": "1.0.0", / / project version number: follow "large version. Minor version. Small version "description": "A Vue.js project", / / Project description "author": "zld", / / author name "private": whether true,// is private / / scripts is the abbreviation of the script we run on the console "scripts": {/ / ① webpack-dev-server: start the http server to achieve real-time compilation / / inline mode will add the entry of webpack-dev-server/client? http://localhost:8080/ to the webpack.config.js entry configuration, so that our access path is localhost:8080/index.html (there is another mode Iframe accordingly) / / progress: displays the progress of packaging "dev": "webpack-dev-server-- inline-- progress-- config build/webpack.dev.conf.js", "start": "npm run dev", / / same as npm run dev Run the development environment "build" directly: "node build/build.js" / / run the build file using node}, / / ② dependencies (project dependent library): use-- save during installation to write to dependencies "dependencies": {"vue": "^ 2.5.2", / / vue.js "vue-router": "^ 3.0.1" / / routing plug-in for vue} / / and devDependencies (development dependent libraries): use-- save-dev during installation to write to devDependencies "devDependencies": {"autoprefixer": "^ 7.1.2", / / autoprefixer is used as a postcss plug-in to parse the CSS supplementary prefix For example, display: flex will be supplemented with display:-webkit-box Display:-webkit-flex;display:-ms-flexbox;display: flex. / / babel: the following babel starts with plug-ins for es6 parsing. The JavaScript code written with the latest standard is compiled down into the version "babel-core": "^ 6.22.1", / / the core of babel, which is available everywhere today, parsing the js code into ast, making it convenient for various plug-ins to parse the syntax accordingly. "babel-helper-vue-jsx-merge-props": "^ 2.0.3", / / prefabricated babel-template function, provided to vue,jsx and others to use "babel-loader": "^ 7.1.1", / / to make the project run using Babel and webpack to transfer js files Use api provided by babel-core to translate "babel-plugin-syntax-jsx": "^ 6.18.0", / / support jsx "babel-plugin-transform-runtime": "^ 6.22.0", / / avoid duplication in compilation output, and compile directly to "babel-plugin-transform-vue-jsx": "^ 3.5.0" in build environment, / / plug-ins used in babel translation Avoid repeating "babel-preset-env": "^ 1.3.2", / / converting to es5 One of the plug-ins used in the transform phase is "babel-preset-stage-2": "^ 6.22.0", / / ECMAScript second phase specification "chalk": "^ 2.0.1", / / used to output different color text "copy-webpack-plugin": "^ 4.0.1", / / copy resources and files "css-loader": "^ 0.28.0" on the command line. / / webpack first uses the css-loader loader to parse the file with the suffix css Then use style-loader to generate a style tag with the final parsed css code, put it in the head tag "extract-text-webpack-plugin": "^ 3.0.0", / / extract the text from more than one package into a separate file "file-loader": "^ 1.1.4", / / ③ package the compressed file Similar to url-loader usage "friendly-errors-webpack-plugin": "^ 1.6.1", / / identify certain categories of WebPACK errors and clean up, aggregate and prioritize to provide better development experience "html-webpack-plugin": "^ 2.30.1", / / simplifies the creation of HTML files, introduces external resources, and creates entry files for html You can use this to configure "node-notifier": "^ 5.1.2", / / support using node to send cross-platform local notifications "optimize-css-assets-webpack-plugin": "^ 3.2.0", / / compress the extracted css And solve the js duplication problem separated by ExtractTextPlugin (multiple files are introduced into the same css file) "ora": "^ 1.2.0", / / load (loading) plug-in "portfinder": "^ 1.0.13", / / View process port "postcss-import": "^ 11.0.0", / / can consume local files, node modules or web_modules "postcss-loader": "^ 2.0.8" / / plug-in "postcss-url" for compatibility with css: "^ 7.2.1", / / relocate, inline or copy "rimraf" on URL: "^ 2.6.0", / / node UNIX command RM-RF, command to force deletion of files or directories "semver": "^ 5.3.0", / / "shelljs" to judge a specific version number: "^ 0.7.6" / / use it to eliminate the dependency of shell scripts on UNIX While still retaining its familiar and powerful commands, you can execute the Unix system command "uglifyjs-webpack-plugin": "^ 1.1.1", / / compress the js file "url-loader": "^ 0.5.8", / / compress the file You can convert the picture to base64 "vue-loader": "^ 13.3.0", / / the WebPACK loader of the VUE single file component "vue-style-loader": "^ 3.0.1", / / similar to the style loader, which you can link after the CSS loader To dynamically inject CSS into the document as a style tag "vue-template-compiler": "^ 2.5.2", / / this package can be used to precompile VUE templates into rendering functions To avoid runtime compilation overhead and CSP restrictions "webpack": "^ 3.6.0", / / Packaging tool "webpack-bundle-analyzer": "^ 2.9.0", / / Visual webpack output file size "webpack-dev-server": "^ 2.9.1" / / provide a development server "webpack-merge" that provides real-time overloading: "^ 4.1.0" / / it creates a new object by combining array and merge objects. If it encounters functions, it will execute them, run the results through the algorithm, and then encapsulate the returned value in the function again. / / engines is the engine Specify node and npm versions "engines": {"node": "> = 6.0.0", "npm": "> = 3.0.0"}, / / restrict the version required by the browser or client to run "browserslist": ["> 1%", "last 2 versions", "not ie 1%", "last 2 versions", "not ie"

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.