webpack

1. Webpack is a kind of static resource building. Besides Webpack, there are also grunt,gulp, Baidu (FIS) 2. NPM init -y backage.json "scripts": {"build": "webpack"}, 3. -cli NPM install webpack webpack-cli --save-dev NPM I webpack webpack-cli -d Check :./node_modules/. Bin /webpack -v 4. Create a SRC in the project root directory and create an index.js 5. X is zero by default. The default configuration entry is SRC /index.js. The default exit is dist/main.js. SRC /xxx.js exit :dist/bundle.js 6. If configured manually, the webPack configuration file must be created to execute the default WebPack configuration file: Webpack.config. js const path=require("path") const config={ Resolve (__dirname,"dist"), // output filename:"bundle.js"}} module.exports = config; * How webpack specifies multiple entries: Configure multiple entries by adding objects to entry:{"main":"./ SRC /main.js", "home":"./ SRC /home.js"}, Resolve (__dirname,"dist"), // Output file filename:"[name].js" //chunk}, if you run the specified configuration file, Instead of the default webpack.config.js, add --config when running through scripts for example: "scripts": {"build": "webpack --config webpack.config.js", "dev": "Webpack-dev-server"} Mode :"development" // development environment or mode:"production" // production environment -- online environment or mode:" None" NPM install clean-webpack-plugin -d install clean-webpack-plugin -d install clean-webpack-plugin -d Const {CleanWebpackPlugin} = require(' cleanwebpack-plugin ') in webpack.config.js: Plugins :[new CleanWebpackPlugin()] * Run the NPM package NPM I webpack-dev-server -d "scripts": {"build": "Webpack ", "dev":"webpack-dev-server"}, NPM run scripts attribute name Run NPM don't slow, then change the NPM mirror, mirror to NPM taobao NPM config set registry https://registry.npm.taobao.org view the modified configuration: DevServer :{port:"9999", contentBase: Path. join(__dirname, 'dist')} * insert the build environment into the index.html file: NPM install html-webpack-plugin -d  const HtmlWebpackPlugin = require('html-webpack-plugin'); New CleanWebpackPlugin(), new HtmlWebpackPlugin({title: })], // take the index.html file as a template, New CleanWebpackPlugin(), new HtmlWebpackPlugin({template:"./index.html", Filename :'index.html' // generate the packed HTML})], NPM install style-loader csS-loader -d webpack.config.js module:{rules:[ {test:/\.css$/,use:['style-loader','css-loader']}]} main.js import './style/test.css' * configure less and sass webpack to identify less: NPM install less less-loader -d  rules:[ {test:/\.css$/,use:['style-loader','css-loader']}, {test: / \. Less $/, use: [' style - loader ', 'CSS - loader', 'less - loader]},] use: use the @ symbol @ border_c: blue; div{ border: 1px solid @border_c; } webpack identify sass: install: NPM install node-sass [email protected] -d config:  rules:[ {test:/\.css$/,use:['style-loader','css-loader']}, {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, {test: / \. (sass | SCSS) $/, use: [' style - loader ', 'CSS - loader', 'sass - loader]},] use: use $$border_c: blue; div{ border: 1px solid $border_c; } *webpac recognizes images or other files: NPM install url-loader -dCopy the code

Integrated vue

Babel NPM install --save-dev babel-loader@babel/core@babel /preset-env -d configuration: {test: /\.js$/, exclude: preset /node_modules/, loader: "babel-loader"} babelrc file {"presets": ["@babel/preset-env"]} 2 NPM install vue ue-loader vue-template-compiler webpack.config.js install vue ue-loader vUE -template-compiler webpack.config.js install vue-loader vUE -template-compiler webpack.config.js install vue-loader vUE -template-compiler webpack.config.js  const VueLoaderPlugin = require('vue-loader/lib/plugin'); Plugins :[new VueLoaderPlugin()], 1.index.html <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title> I am the entry to the project </title> </head> <body> <h1> I am the injected HTML </h1> <div ID ="app"></div> </body> </ HTML > two. <template> <div> <h2>{{title}}</h2> <p> </template> <script> export default { Name :"app", data(){return{title:" I am me "}}} </script> 三.main.js configure import Vue from "Vue "; import App from "./App.vue" new Vue({ el:"#app", render:(h)=>h(App) }) 3. Route configuration: install: vue vue-router Create route import vue from "vue"; import Router from "vue-router"; import Home from ".. /components/Home.vue" import Cate from ".. /components/Cate.vue" Vue.use(Router) const router = new Router({ routes:[ { path: '/home', component: Home, name:'Home' }, { path: '/cate', component: Cate, name:'Cate' } ] }) export default router; Import router import Vue from "Vue "; import App from "./App.vue" import router from "./router/index.js" new Vue({ el:"#app", router, </router-view> render:(h)=>h(App)}) app.vueCopy the code