1. Introduction

The previous development has been built in the framework of the company, or vue@cli scaffolding out of the box, the project will spend a lot of time in the investigation after encountering problems, so simply study to build a manual, but also familiar with the principle of the inside. Build this is in the Windows environment, MAC is much the same, the basic functions are:

  • Support for hot updates
  • Support vUE family bucket + SCSS development
  • File naming rules after compilation
js/[name]-[hash:8].js    
css/[name]-[hash:8].css
Copy the code
  • Support image compression in production environment
  • Supports compressed JS code after packaging
  • Support automatic compression of DIST files

2. Install the node

Download the latest version from the Node official website, and install it in the default path. After the installation is successful, enter node -v in the CMD command box to check whether the installation is successful.

3. Initialize the project

NPM init (you can also run NPM init -y, which skips some of the defaults). After successful execution, a package.json file will be created in the current folder by default

4. Install webpack

$ npm install webpack --save-de
Copy the code

After the installation is successful, node_modules and package-lock.json files are displayed by default

5. Install vUE family bucket and required plug-ins

Json, and NPM install. Sometimes the NPM installation will fail. In this case, do not use the contents of this file. Then add the required content of the plug-in to package.json file, CNPM install. Parameters that

{
  "name": "henry-test"."version": "1.0.0"."description": "test-project"."main": "src/main.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack-dev-server --inline --progress --config webpack.base.config.js"."build": "webpack -p --config webpack.prod.config.js"
  },
  "keywords": []."author": "henry"."license": "ISC"."dependencies": {
    "axios": "^ 0.19.2"."vue": "^ 2.6.11." "."vue-router": "^ 3.2.0"."vuex": "^ 3.4.0"
  },
  "devDependencies": {
    "@babel/core": "^ 7.9.6"."babel-core": "^ 6.26.3"."babel-loader": "^ 8.1.0"."babel-plugin-transform-runtime": "^ 6.23.0"."babel-preset-env": "^ 1.7.0"."babel-preset-stage-2": "^ 6.24.1"."chalk": "^ 4.0.0"."child_process": "^ 1.0.2"."clean-webpack-plugin": "^ 3.0.0"."cnpm": "^ 6.1.1." "."css-loader": "^ 3.5.3." "."express": "^ 4.17.1"."filemanager-webpack-plugin": "^ at 2.0.5." "."html-webpack-plugin": "^ 4.3.0"."imagemin-webpack-plugin": "^" 2.4.2."mini-css-extract-plugin": "^ 0.9.0"."node-sass": "^ 4.14.1." "."open-browser-webpack-plugin": "0.0.5"."ora": "^ 4.0.4." "."postcss-loader": "^ 3.0.0"."rimraf": "^ 3.0.2." "."sass": "^ 1.26.5"."sass-loader": "^ 8.0.2." "."semver": "^ 7.3.2." "."shelljs": "^ 0.8.4"."style-loader": "^ 1.2.1." "."uglifyjs-webpack-plugin": "^ 2.2.0." "."url-loader": "^ 4.1.0." "."vue-loader": "^ 15.5.1"."vue-style-loader": "^ 2.0.0." "."vue-template-compiler": "^ 2.6.11." "."webpack": "^ 4.43.0"."webpack-cli": "^ 3.1.2." "."webpack-dev-middleware": "^ 3.7.2." "."webpack-dev-server": "^ 3.11.0"."webpack-hot-middleware": "^ 2.25.0"."webpack-merge": "^ 4.2.2." "."webpack-parallel-uglify-plugin": "^ 1.1.2." "
  },
  "engines": {
    "node": "> = 4.0.0"."npm": "> = 3.0.0"
  },
  "browserslist": [
    "1%" >."last 2 versions"."not ie <= 8"]}Copy the code

6. Create a file directory structure

Directory structure reference address

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="icon" href="/favicon.ico"> <title> Manually build the front-end development framework </title> </head> <body> <div id="app"></div>
</body>
</html>
Copy the code

main.js

import Vue from 'vue'
import App from './app'
import router from './router/index'
import './static/css/common.scss'; Vue new vue ({router,// route render:h=>h(App)})$mount('#app');

Copy the code

app.vue

<template>
    <div id="app">
        <div>{{name}}</div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "app".data() {return{
                name:'the VUE architecture'}},mounted() {
        }
    }
</script>

<style scoped lang="scss">

</style>
Copy the code

router/common.js

const routes = [
    {
        path: '/',
        name: 'home',
        component:() => import('@/page/home.vue'),
    },
    {
        path: '/other',
        name: 'other',
        component: () => import('@/page/other.vue'),},]export default routes
Copy the code

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './common'
Vue.use(VueRouter);
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
export default router;

Copy the code

webpack.base.config.js

const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
// const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default ; // const webpack = require('webpack'Module.exports = {mode: process.env.node_env, // entry:path.resolve(__dirname,'src/main.js'Output: {path:path.resolve(__dirname,'dist'// Output folder filename: process.env.node_env! = ='production' ? 'js/[name].js' : 'js/[name]-[hash:8].js', chunkFilename: process.env.NODE_ENV ! = ='production' ? 'js/[name].js' : 'js/[name]-[hash:8].js',// dynamic import file name}, devServer:{port:8082, /// port contentBase: path.join(__dirname,'dist'),
        inline:true,
        open:true
    },
    resolve:{
        extensions: ['.js'.'.vue'], //js and vue files do not need extensions when import is importedalias: {
            'vue$': 'vue/dist/vue.esm.js'// Vue specifies the official way to write it. If you do not write this, it will be prompted when runningThe '@': path.resolve(__dirname, 'src'}} {rules: [{}}}}} {rules: [{}}}}test: /\.js/,
                use: ['babel-loader'],}, {test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader! css-loader! sass-loader! style-loader'}}}, {test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'style-loader'// Will import the style tag in the header, only for.css files'css-loader'],}, {test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader'.'sass-loader',]}, {test: /(\.jpg|\.png|\.jpeg|\.gif)$/i,
                loader: 'url-loader',
                options:{
                    limit: 1024,
                    name: '[name]-[hash:7].[ext]'}}]}, // plugins:[new htmlPlugin({title:'vue',
            filename:'index.html'// Source file name template:'./index.html'Minify :{removeComments:true// collapseWhitespace:true// Clear space},hash: true}), new VueLoaderPlugin (), new CleanWebpackPlugin (), / / clean up build folder. New webpack HotModuleReplacementPlugin (), new ImageminPlugin({test: /\.(jpe? g|png|gif|svg)$/i,disable: process.env.NODE_ENV ! = ='production', // Disable during development
            pngquant: {
                quality: '95-100'New ParallelUglifyPlugin({// Pass UglifyJS parameters as follows:test: /.js$/g, /* uglifyJS: used to compress ES5 code configuration, type Object, directly passed to uglifyJS parameters. UglifyES: used to compress ES6 code. The Object type is directly passed to uglifyES. */ uglifyES: {output: {/* Whether to output readable code, that is, to keep Spaces and tabs, the default is output, for better compression, can be set tofalse
                        */
                    beautify: false, /* Whether to keep comments in the code. The default value is reservedfalse
                    */
                    comments: false}, compress: {/* Whether to output a warning message when UglifyJS deletes unused codefalseDisable warnings that do not work */ warnings:false*/ drop_console */ drop_console */ drop_consoletrue, /* whether to embed a variable that is already defined but used only once, such as var x = 1; Y = x is converted to y = 5. By default, y = 5 is not convertedfalse
                    */
                    collapse_vars: true, /* Whether to extract static values that occur more than once but are not defined as variables to reference, such as x ='xxx'; y = 'xxx'Let's say var a is equal to'xxxx'; x = a; y = a; The default value is not converted. For better compression, you can set it tofalse
                    */
                    reduce_vars: true} } }), new MiniCssExtractPlugin({ filename: process.env.NODE_ENV ! = ='production' ? 'css/[name].css' : 'css/[name]-[hash:8].css', chunkFilename: process.env.NODE_ENV ! = ='production' ? 'css/[name].css' : 'css/[name]-[hash:8].css',}})]Copy the code

webpack.prod.config.js

const webpackBase = require('./webpack.base.config');
const webpackMerge = require('webpack-merge');
const FileManagerPlugin = require('filemanager-webpack-plugin'); module.exports = webpackMerge(webpackBase, {plugins:[new FileManagerPlugin({// initialize the filemanager-webpack-plugin instance onEnd: {delete: [// First need to delete the project root directory dist. Zip'./architecture-demo.zip',], archive: [// Then we select the dist folder and package it as architecture-demo.zip and put it in the root directory {source: './dist', destination: './architecture-demo.zip'},]}})]});Copy the code

7. Write at the end

Here a simple frame has been built, is not the feeling is very simple! Attached is the example address github.com/tinzai/arch…