First, install Node

A, webpack

1. Create a new folder named Amazing and go to the folder

Command line operation

NPM init -y (y --) stands for yes, leaving out the default, clickCopy the code

A package.json file is then generated after a single carriage return on the command line

2. Install Webpack and webPack-CLI

npm install webpack webpack-cli --save-dev
Copy the code

3. Create SRC, public and webpack.config.js

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}

const path = require('path');

module.exports = {
  entry: {app:'./src/main.js' // The file that needs to be packaged
  },
  output: {
    filename: 'bundle.js'.// What is the input file name, and what is the generated file name in dist
    path: path.resolve(__dirname, 'dist')// Specify the directory for the generated files}};Copy the code

4. Install Webpack-dev-server, which gives you a simple Web server that can be reloaded in real time etc

Install the html-webpack-plugin to extend webpack. Install the clean-webpack-plugin to clean up directory contents. You can also use this plugin to try to clean up files in the dist directory before packaging

npm install --save-dev webpack-dev-server
npm install --save-dev html-webpack-plugin
npm install --save-dev clean-webpack-plugin
Copy the code

5,

package.json

{
  "name": "amazing"."version": "1.0.0"."description": "Project Setup"."main": "webpack.config.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack-dev-server --open --hot"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "clean-webpack-plugin": "^ 3.0.0"."html-webpack-plugin": "^ 3.2.0"."webpack": "^ 4.41.5"."webpack-cli": "^ 3.3.10"."webpack-dev-server": "^ 3.10.1"}}Copy the code

webpack.config.js

const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
     entry: {app:'./src/main.js' // The file that needs to be packaged
     },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template:'./public/index.html'.// This file is placed in the same file as dist+ +})new CleanWebpackPlugin(),
+    ],
+    devServer: {
+        contentBase: './dist',
+        port: 8080+},output: {
        filename: 'bundle.js'.// What is the input file name, and what is the generated file name in dist
        path: path.resolve(__dirname, 'dist')// Specify the directory for the generated files}}Copy the code

6. To import a CSS file from a JavaScript module, you need to install and add style-loader and CSS-loader to the Module configuration. You need to install and add file-loader in the Module configuration

npm install --save-dev style-loader css-loader
npm install --save-dev file-loader
Copy the code

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    entry: {app:'./src/main.js' // The file that needs to be packaged
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./public/index.html'.// This file is placed in the same file as dist
        }),
        new CleanWebpackPlugin(),
    ],
    devServer: {
        contentBase: './dist'.port: 8080
    },
+   module: {
+       rules: [
+           {
+               test: /\.css$/,
+               use: [
+                   'vue-style-loader',
+                   'style-loader',
+                   'css-loader'
+               ]
+           },
+           {
+               test: /\.(jpg|png|svg|gif)$/,
+               use: [
+                   'file-loader'
+               ]
+           },
+           {
+               test: /\.(woff|woff2|eot|ttf|otf)$/,
+               use: [
+                   'file-loader'+] +} +] +},output: {
        filename: 'bundle.js'.// What is the input file name, and what is the generated file name in dist
        path: path.resolve(__dirname, 'dist')// Specify the directory for the generated files}}Copy the code

7. Since there is a lot of good code in ECMAScript 2015+ syntax that is not recognized by browsers, such as arrow functions, you need to install babel-related modules and plugins to convert it to backward-compatible JavaScript syntax (just the usual ones, if you use others). Need to install and configure yourself)

npm install --save-dev babel-loader
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save-dev @babel/plugin-transform-arrow-functions
npm install --save-dev @babel/runtime @babel/plugin-transform-runtime
Copy the code

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {app:'./src/main.js' // The file that needs to be packaged
    },
    output: {
        filename: 'bundle.js'.// What is the input file name, and what is the generated file name in dist
        path: path.resolve(__dirname, 'dist'),// Specify the directory for the generated files
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./public/index.html'.// This file is placed in the same file as dist
        }),
        new CleanWebpackPlugin(),
    ],
    devServer: {
        contentBase: './dist'.port: 8080
    },
    module: {
        rules: [{test: /\.css$/.use: [
                    'vue-style-loader'.'style-loader'.'css-loader'] {},test: /\.(jpg|png|svg|gif)$/.use: [
                    'file-loader'] {},test: /\.(woff|woff2|eot|ttf|otf)$/.use: [
                    'file-loader'
                ]
            },
+           {
+               test: /\.js$/,
+               use: [
+                   'babel-loader'
+               ],
+               exclude: /node_modules/+},]}}Copy the code

babel.config.js

module.exports = function (api) {
    api.cache(true);
  
    const presets = [
        '@babel/preset-env',];const plugins = [
        '@babel/plugin-transform-arrow-functions'.'@babel/plugin-transform-runtime'
    ];
  
    return {
      presets,
      plugins
    };
  }
Copy the code

Second, the VUE

Install vUE related packages

npm install vue --save
npm install --save-dev vue-loader vue-template-compiler
Copy the code

Install SASS (sASS is a CSS preprocessor, but also very useful, can be installed according to personal preference)

npm install --save-dev sass-loader
npm install --save-dev node-sass
Copy the code

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: {app:'./src/main.js' // The file that needs to be packaged
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./public/index.html'.// This file is placed in the same file as dist
        }),
        new CleanWebpackPlugin(),
+        new VueLoaderPlugin()
    ],
    devServer: {
        contentBase: './dist'.port: 8080
    },
    module: {
        rules: [{test: /\.css$/.use: [
                    'vue-style-loader'.'style-loader'.'css-loader'] {},test: /\.(jpg|png|svg|gif)$/.use: [
                    'file-loader'] {},test: /\.(woff|woff2|eot|ttf|otf)$/.use: [
                    'file-loader'] {},test: /\.js$/.use: [
                    'babel-loader'].exclude: /node_modules/
            },
+           {
+               test: /\.vue$/,
+               use: [
+                   'vue-loader'
+               ],
+           },
+           {
+               test:/\.scss$/,
+               use:[
+                   'style-loader',
+                   'css-loader',
+                   'sass-loader'+] +},]},output: {
        filename: 'bundle.js'.// What is the input file name, and what is the generated file name in dist
        path: path.resolve(__dirname, 'dist')// Specify the directory for the generated files}}Copy the code

2, the use of sass as follows: ①, the introduction of external style use

import '.. /css/test.scss'
Copy the code

② Use in. Vue

<style lang=" SCSS ">Copy the code

3. Create the app. vue file main.js in the subfolder SRC

import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app'.render: h= > h(App),
})
Copy the code

Start the project using NPM start