webpack搭建vue项目实现脚手架功能

           使用webpack集成vue脚手架

在今天学习webpack搭建前端环境时候我们应该先熟知node有关的知识,用node.js来安装一个包。便于我们更好的理解。

一:什么是webpack

  1. 本质上,Webpack 是一个现代 JavaScript >应用程序的静态模块打包器(static module >bundler)。在 Webpack 处理应用程序时,它会在内部创建一个依赖图(dependency >graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个 bundle。
  2. webpack是一个静态资源构建,打包的工具

二:webpack能解决什么问题?

Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具,打包的思路是:遍历源文件→匹配规则→打包,这个过程中做不到按需加载,即对于打包起来的资源,到底页面用不用,打包过程中是不关心的。

Webpack 跟其他构建工具本质上不同之处在于:Webpack 是从入口文件开始,经过模块依赖加载、分析和打包三个流程完成项目的构建。在加载、分析和打包的三个过程中,可以针对性的做一些解决方案,达到按需加载的目的,比如code split(拆分公共代码等)。

当然,Webpack 还可以轻松的解决传统构建工具解决的问题:

  • 模块化打包,一切皆模块,JS 是模块,CSS 等也是模块;

  • 语法糖转换:比如 ES6 转 ES5、TypeScript;

  • 预处理器编译:比如 Less、Sass 等;

  • 项目优化:比如压缩、CDN;

  • 解决方案封装:通过强大的 Loader 和插件机制,可以完成解决方案的封装,比如 PWA;

  • 流程对接:比如测试流程、语法检测等。

三:为什么要使用webpack?

  • 解耦需要:
    使用SPA(Single-page Application,单页面应用)开发大型项目时,解决模块之间的解耦和维护问题;

  • 前端工程化需要:

    前端开发逐渐向工程化演进,理解前端框架的项目构建的流程(如React、Vue、Angular);

  • 项目扩展需要:

    理解Webpack核心概念(如Babel加载器、Plugin插件),便于项目协同开发与项目整合;

  • 面试需要:

    进入一线互联网公司的必备技能;

四:webpack搭建前端开发环境

首先要有node环境,进入Node.js的官网,选择对应系统下载安装包。安装node后集成了npm管理器

4.1 安装模块
  1. 我们创建一个项目文件夹并进入。例如:webpack_vue
  2. 我们打开终端,输入:
  npm init -y
  1. 。来创建一个package.json
  2. 安装webpack工具
   npm install webpack webpack-cli --save-dev

简写:

   npm i webpack webpack-cli -D

4.在根目录下创建一个src,并且建立一个index.js.
5.我们要在package.json的script里面 加一个
“build”:“webpack”
我们直接npm run build 来运行
这个时候奇迹的事情就发生了,自动构建了一个dist的目录,并且生成了一个main.js 的文件.

4.2 配置文件

我们在手动配置文件的时候需要创建一个webpack.config.js。在这里面配置文件并且抛出模块
入口(entry),出口(output),plugin(配置插件),加载器(loader)
(1)配置入口(entry)

module.exports = {
  mode: "development", //设置我们的环境 是线上还是线下 这里我们设置的是线下的 线上的为production
  entry: "./src/index.js",//入口文件

(2)配置出口(output)

const path = require('path');//我们也需要引入path模块 ,因为引入路径的时候要用到。


//配置出口
module.exports = {
 output: {
   path: path.resolve(__dirname, 'dist'),//出口的文件夹
    filename: "bundle.js"//文件夹的名字
  },
  

注意我们在运行时候可能会出现一个黄色的警告,那么我们如何消除这个警告呢。

第一步: npm install --save-dev clean-webpack-plugin

第二步: 在webpack.config.js中引入

第三步:通过plugins实例化




           module.exports = {
        		plugins: [
               new CleanWebpackPlugin(),
       
         
           };

(3)配置加载器 (loader)

   //webpack通过loader识别文件的匹配规则
    module: {
        
        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'] },
            { test: /\.(jpg|jpeg|png|gif)$/, use: ['url-loader'] },
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
            { test: /\.vue$/, loader: 'vue-loader' }
        ]

    },

(4) plugin 引入插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
   plugins: [
        //添加文件清理的插件
        //实例化
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',  //读取模板的入口文件
            filename: 'index.html'  //生成打包后的html文件
        }),
        new VueLoaderPlugin()
    ],

4.3 搭建本地服务

1.安装依赖:

   npm install webpack-dev-server -D
//启服务器环境
devServer: {
    //配置端口号
    port: 9999,
    //可以实现热更新
    hot: true, 
    //服务器在内存中监听目录
    contentBase: path.join(__dirname, 'dist'),
}

五:集成vue

5.1
  1. 安装es6的包:babel
  1.npm install --save-dev babel-loader @babel/core @babel/preset-env
 

  

2.配置webpack


    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },


3.在项目根目录下创建.babelrc配置文件

     {
           "presets": ["@babel/preset-env"]
     }

5.2安装vue包

安装:

vue-loader,vue-template-compliler

配置vue插件并在plugin中实例化插件:

   const VueLoaderPlugin = require('vue-loader/lib/plugin');

   plugins: [
    ...
    //实例化vue插件
    new VueLoaderPlugin()
],
拓展

当然呢,我们也可以用sass啊less进行编译,那么我们同样要做的就是我们安装包,然后再webpack.config.js里面引入,然后我们在plugin里面引入 ,实例化

webpack识别less:

  npm install less less-loader -D

**webpack识别sass:**

```bash

   npm install sass-loader node-sass -D

webpack识别图片或其他文件

  npm install url-loader -D

那么接下来我们就可以下载vuex vue-router啊等,尽情的畅游在vue的世界里面了。以上呢,是我个人对于学习这个的理解,欢迎大家随时补充~

你可能感兴趣的:(webpack,环境变量的配置,集成vue)