2022基于webpack从0搭建vue项目，vue2

命令 npm init -y

安装 webpack CLI

命令 npm install --save-dev webpack-cli

安装 webpack

命令 npm i webpack -D

对 -g -S -D 的补充

npm i xx -g：npm install xx --global的简写，对模块进行全局安装。

所谓全局安装，是指把模块安装到操作系统上，全局是指操作系统，全局安装完成后，一般会安装到AppDataAppData\Roaming\npm目录下。

如：npm install webpack -g，就是全局安装webpack，在操作系统的任何一个目录下都可以使用webpack所提供的指令。

npm i xx -D：npm install xx --save-dev的简写，对模块进行局部安装，模块写入到 devDependencies 对象。

局部的意思是只针对当前项目，模块一般安装到项目文件夹下的node_modules文件夹下。

devDependencies对象，是我们开发的时候需要用到的一些包，只用于开发阶段，真正打包上线的时候并不需要这些包，

因为这些工具只是你用来打包代码的，是用来识别特定文件以及代码，帮助我们生产最终文件的。如npm i vue-loader

vue-template-complier -D,就是在Vue项目中安装vue模板文件的解析插件，经过配置后即可在项目中解析vue模板

npm i xx -S：npm install xx --save 的简写，同上也是对模块进行局部安装，不同的是模块写入到 dependencies对象。

模块同上一样将安装到项目文件夹下的node_modules文件夹下。

dependencies对象，这个与devDependencies不同，是需要发布到生产环境中的，就比如你要跑一个基于vue的项目，

所以需要vue.js来支持，vue.js文件就需要跟随项目到最终的生产环境。npm i vue -S即可将Vue模块安装到项目的依赖中，

并一同发布到生产环境。

对插件版本的补充 可以cv到package.json 直接 npm i

{

  "name": "webpackProject",

  "version": "1.0.0",

  "description": "",

  "main": "webpack.config.js",

  "scripts": {

    "start": "webpack --config webpack.config.js",

    "serve": "webpack serve"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "@babel/core": "^7.17.5",

    "@babel/preset-env": "^7.16.11",

    "babel-loader": "^8.2.3",

    "clean-webpack-plugin": "^4.0.0",

    "css-loader": "^6.6.0",

    "file-loader": "^6.2.0",

    "html-webpack-plugin": "^5.5.0",

    "sass": "^1.49.8",

    "sass-loader": "^12.6.0",

    "style-loader": "^3.3.1",

    "url-loader": "^4.1.1",

    "vue-loader": "^17.0.0",

    "vue-template-compiler": "^2.6.14",

    "webpack": "^5.69.1",

    "webpack-cli": "^4.9.2",

    "webpack-dev-server": "^4.7.4"

  },

  "dependencies": {

    "vue": "^3.2.31"

  }

}

在根目录下创建一个 webpack.config.js 文件

// 导入核心模块 path

const path = require('path')

// 导入自动生成html文件的插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

// 导入自动清除 dist 目录的插件

const {

    CleanWebpackPlugin

} = require('clean-webpack-plugin')



// 配置文件

module.exports = {

    // 配置入口

    entry: './src/main.js',

    // webpack.config.js 文件 配置出口

    output: {

        filename: 'main[hash:8].js', // 出口文件的名称  'main[hash:8].js' 清除缓存

        path: path.join(__dirname, '/dist') // 出口文件生成的路径

    },

    // 配置 mode, development 开发环境  production 生产环境

    mode: 'production',

    // 配置解析

    resolve: {

        alias: {

            // key: value

            '@': path.join(__dirname, 'src')

        },

        // 配置可省略的后缀

        extensions: ['.js', '.css', '.less', '.vue']

    },

    // 配置源码映射

    // devtool: 'source-map',

    // 配置 loader

    module: {

        // 配置规则

        rules: []

    },

    // 配置 plugin

    plugins: [

        // 自动生成html文件的插件

        new HtmlWebpackPlugin({

            filename: 'index.html',

            template: path.join(__dirname, './public/index.html')

        }),

        // 自动清除 dist 目录插件

        new CleanWebpackPlugin(),

        // 配置 vue loader 插件

    ],

    // 配置开启服务器的信息

    devServer: {

        static: {

            directory: path.join(__dirname, 'dist'),

        },

        compress: true,

        port: 80,

    },

    performance: {

        hints: false

    }

}

按照上述配置把对应文件给创建好，如果没有文件就会报错，

安装插件 html-webpack-plugin clean-webpack-plugin

​ 是因为 webpack.config.js 里面有用到

npm i -D html-webpack-plugin clean-webpack-plugin

配置我们的入口文件

在根目录里新建一个 src 的文件夹在里面新建一个 main.js 文件 写入js代码 然后打包后户减少

打包前

function fn() {

    console.log('孙志豪')

}

fn()



打包后 会多一个 dist 文件 把 function 去掉了

console.log('孙志豪')

在根目录里面新建一个 public 文件夹

​ 在新建一个 index.html 输入 ! 回车 初始化

​ 写入一个 div 为 id=“#app”

找到 package.json 文件 配置打包命令

 "scripts": {

    "build": "webpack --config webpack.config.js"

  },

然后运行打包的命令

npm run build

此时会多一个叫 dist 的文件夹

设置启动 server 服务器

---

安装 server 启动的服务器

npm i webpack-dev-server -D

找到 package.json 文件 配置启动服务

  "scripts": {

    "build": "webpack --config webpack.config.js",

    "serve": "webpack serve"

  },

在webpack.config.js 配置开启服务器的信息

devServer: {

    static: {

        directory: path.join(__dirname, 'dist'), // 出口写什么这里就写什么

    },

    port: 8080, // 配置端口号

    open: true, // 自动打开浏览器

    hot:true, // 开启模块的热更新

},

运行服务

npm run serve

安装loader

---

webpack css 样式 引入报错 和 scss 语法错误

这些操作之前需要先安装 ‘style-loader’, ‘css-loader’, ‘sass-loader’

命令 npm i css-loader style-loader sass sass-loader -D

1、在src，目录下新建一个你的css文件

2、 安装完成 在 webpack.config.js 找到  rules 配置 css loader 

// 配置规则

    rules: [


###  最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》  

![](https://img-blog.csdnimg.cn/img_convert/b6ecb2c71421efff2a0cd1db5a9d4251.png)



最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。



我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。