In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly explains "what are the basic files of webpack configuration in vue-cli scaffolding". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what are the basic files of webpack configuration in vue-cli scaffolding.
I. Preface
Vue-cli is a scaffolding for building vue single-page applications. Enter a specified string of command lines to automatically generate vue.js+wepack project templates. Among them, webpack plays an important role in modularizing our code and introducing some plug-ins to help us improve the functions such as packing and compressing files, converting pictures to base64 and so on. The later configuration of the project makes our understanding of the code automatically generated by the scaffolding more important. Next, I will break the file one by one based on the webpack3.6.0 version combined with the document, pure dry material.
II. Main body structure
├─ build
├─ config
├─ dist
├─ node_modules
├─ src
│ ├─ assets
│ ├─ components
│ ├─ router
│ ├─ App.vue
│ ├─ main.js
├─ static
├─ .babelrc
├─ .editorconfig
├─ .gitignore
├─ .postcssrc.js
├─ index.html
├─ package-lock.json
├─ package.json
└─ README.md
1 、 package.json
The project is a big family, and each document has its own function. Package.json makes a list of which npm packages are needed to participate in the project, and the npm install command manages the local installation packages based on the addition or subtraction of this configuration file.
{/ / 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": "qietuniu", / / 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 in the * * standard is compiled down into the core of the version "babel-core": "^ 6.22.1", / / 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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.