webpack搭建vue项目零基础搭建

最新推荐文章于 2024-03-19 18:17:34 发布

this.齐天

最新推荐文章于 2024-03-19 18:17:34 发布

阅读量1.1k

点赞数 4

分类专栏：搭建项目详解文章标签： vue webpack npm

本文链接：https://blog.csdn.net/llllladcf/article/details/107026396

版权

搭建项目详解专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack搭建vue零基础搭建

webpack搭建vue项目步骤详解
初始化package.json文件
安装wbepack打包工具和wnepack脚手架
配置出入口文件
引入bable （适配为啦让代码在各个浏览器流畅执行）
自动生成 HTML 文件
安装webpack-server（项目自启动）
- 1.安装依赖
安装vue相关依赖（为啦识别vue文件）
- webpack.config.js完整代码
完善vue结构
这样就完成啦一个vue项目的搭建 =。=

webpack搭建vue项目步骤详解

自己在搭建vue是遇到很多问题也查啦很多，摸索着搭建完成，在博客记录一下同时加强记忆。

初始化package.json文件

1.创建文件夹，打开cmd命令窗口，执行npm init 命令初始化package.json文件

 {
    "name": "demo1", 
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
  }


name	表示项目的名称
version	表示项目的版本号
description	对项目的描述
main	项目的入口文件
script	脚本命令配置
author	作者(可以使用项目作者的名字)
license	证书

安装wbepack打包工具和wnepack脚手架

1.执行yarn add webpack webpack——cli --save-dev 或者执行 cnpm/npm install webpack webpack-cli --save-dev

第一个webpack代表安装打包工具
第二个webpack——cli 表示安装 webpack脚手架

2.配置构建脚本如下面的build脚本

"scripts": {
  "build": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
}

配置完成后可以运行npm run build 命令执行项目构建
这时会报错 can not resolve ./src 这是因为找不到项目的入口文件

解决方法

在项目根木录中创建出src文件夹
然后在src文件夹中新增index.js文件此时js文件名称不能随意命名
解决完成后再次执行npm run build 命令发现项目中多出一个dist文件夹
dist文件夹中有一个压缩过后的js文件 main.js 在该文件中可以找到在src文件夹下的index.js的代码

-此时表示能够成功打包项目但是终端会提示未设置mode的警告

现在需要配置package.json中的脚本如下
再次运行npm run build 命令发现警告消失
运行build脚本生成的js文件会进行压缩运行dev命令不会

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

production mode(生产模式) 可以开箱即用地进行各种优化。包括压缩，作用域提升，tree-shaking 等。
另一方面，development mode(开发模式) 针对速度进行了优化，仅仅提供了一种不压缩的 bundle
在 webpack4 中，可以在没有一行配置的情况下完成任务！只需定义 –mode 参数即可获得所有内容！

配置出入口文件

1.在项目根目录中创建sr文件夹然后在src文件下创建main.js

这时打包cmd窗口运行 npm run build 命令会报错因为没有修改入口配置文件配置
2.这时在项目根目录中创建webpack.config.js文件
在文件里写入

  const path = require('path')
  module.exports = {
    // 配置入口文件 入口的值可以是一个字符串 也可以是一个对象
    // entry: './src/main.js'
    entry: {
      // 入口文件是对象的时候 对象的key(在不配置output的时候)会作为默认生成的js文件的文件名称
      index: './src/main.js'// 需要打包的文件入口   key = index
    },
    // 打包输出文件的相关配置
    // publicPath : __dirname + '/static/' 表示publicpath(资源引入路径)为绝对路径
    // publicPath: '/' 资源引入从根目录开始
    // publicPath: './' 代表相对路径
    //  __dirname：代表当前文件夹
    output: {
      publicPath: '/', // 公共资源引入的路径   // js 引用的路径或者 CDN 地址
      path: path.resolve(__dirname, 'dist'), // 将打包生成的文件夹解析到当前项目的跟目录中   // 打包文件的输出目录
      filename: 'index.js' // 打包生成的js文件的名称     
    }
  }

引入bable （适配为啦让代码在各个浏览器流畅执行）

1.使用 npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime @babel/polyfill @babel/runtime --save-dev 输入cmd安装babel相关依赖
2.安装的同时在项目的根目录中创建名为 .babelrc 的新文件来配置 Babel:

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

如果遇运行时到如下警告

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version.
 Currently, we assume version 2.x when no version is passed. 
 Since this default version will likely change in future versions of Babel,
 we recommend explicitly setting the core-js version you are using via the `corejs` option. 
 
You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`
's `dependencies` section. If it doesn't, you need to run one of the following commands: 
 
  npm install --save core-js@2    npm install --save core-js@3 
  yarn add core-js@2              yarn add core-js@3

- 这时候就不仅仅不仅仅要安装 npm install --save core-js@3 还需要设置 .babelrc 设置 “corejs”: 3

{
 "presets": [
   [
     "@babel/preset-env",
     {
       "useBuiltIns": "usage",
       "corejs": 3
     }
   ]
 ],
 "plugins": ["@babel/plugin-transform-runtime"]
}

3.等安装结束后webpack 配置 loader(加载器)

// 在webpack.config.js中添加配置
module: {
  rules: [
    {
      test: /\.js$/, // 使用正则来匹配 js 文件
      exclude: /node_modules/, // 排除依赖包文件夹  //告诉系统那个文件不使用bable依赖 不进行转义
      use: {
        loader: 'babel-loader' // 使用 babel-loader  //告诉系统使用那个loader  
      }
    }
  ]
}

自动生成 HTML 文件

为什么要自动生成HTML 文件那，因为每次要去更改 index.html 中引入 js 文件很麻烦，一旦打包的名字变更后，也要对应的去修改 index.html 引入的 js 名称，这个时候就要使用一个插件来帮助我们，打包完之后自动生成 HTML 文件，并自动引入打包后的 js 文件

1.安装依赖

安装插件
clean-webpack-plugin用来删除并重新生成dist文件夹 html-webpack-plugin 为了自动生成html文件
安装命令
npm i html-webpack-plugin html-loader --save-dev
安装完后package.json 如下：

//有里边这几个配置就可以啦
{
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

2.更改配置文件

安装文成后完善webpack.config.js如下

//  该文件在webpack项目运行时会自动执行
const path = require('path') // 该模块不用下载可以直接使用

// 引入clean-webpack-plugin 插件 作用是每次打包会删除打包生成的文件夹并从新生成一个
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 引入自动生成html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
  module.exports = {
    entry: {
      index: './src/main.js'
    },
    output: {
      publicPath: '/',   // js 引用的路径或者 CDN 地址
      path: path.resolve(__dirname, 'dist'),   // 打包文件的输出目录
      filename: 'index.js'  // 打包后生产的 js 文件
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin ({
        title: '自定义标题',
        minify: {
          removeComments: true, // 打包后移除html文件中的注释
          collapseWhitespace: true, // 打包后移除html文件中的空白符
          minifyCSS: true // 压缩内联css
        },
        filename: 'index.html' // 配置生成的html文件名称
      })
    ],
    module: {
        rules: [
        {
            test: /\.js$/,  // 使用正则来匹配 js 文件
            exclude: '/node_modules/',  // 排除依赖包文件夹
            use: {
            loader: 'babel-loader' // 使用 babel-loader
            }
        },
        {
          test: /\.vue$/, //vue规则
          loader: 'vue-loader'
      }
     ]
    },
  }

3.创建模板文件夹

在根目录中创建模板文件夹 public
- 在 public 中新建一个文件insex.html ，在其中配置代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<!-- 这是模板html文件 -->
  <!-- <div>html文件</div> -->
  <div id="app"></div>
</body>
</html>

然后在 weboack.config.js 中的 plugins 配置 template

plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '自定义标题', //生成的html的标题
      minify: {
        removeComments: true, // 打包后移除html文件中的注释
        collapseWhitespace: true, // 打包后移除html文件中的空白符
        minifyCSS: true // 压缩内联css
      },
      template: './public/index.html', // 生成html文件所需要的模板文件   --------------就是配置这个
      filename: 'index.html' // 配置生成的html文件名称
      
    })
  ],

如果需要打包好的文件标题是自定义的需要修改模板文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%=htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 这是模板html文件 -->
  <!-- <div>html文件</div> -->
  <div id="app"></div>
</body>
</html>

安装webpack-server（项目自启动）

1.安装依赖

cmd运行安装命令npm i webpack-dev-server --save-dev
配置启动命令，在package.json 中配置

 "scripts": {
    "serve": "webpack-dev-server",   //就是添加这个 配置这个
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

添加相关配置告诉server打开那个文件

在webpack.config.js 中配置devServer

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000, // 本地服务器端口号
    hot: true, // 热重载
    overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
    historyApiFallback: {
      // HTML5 history模式
      rewrites: [{ from: /.*/, to: '/index.html' }]
    }
  }

添加模式配置

  mode: 'development', // 开发模式
  devtool: 'source-map', // 开启调试  //开启调试的作用就是为啦调试的时候让文件的代码能看的懂，就算压缩后也能看懂
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000, // 本地服务器端口号  //可以自定义更改
    hot: true, // 热重载
    overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
    historyApiFallback: {
      // HTML5 history模式
      rewrites: [{ from: /.*/, to: '/index.html' }]
    }
  }

添加热部署和热重载（为啦代码能实时更新）
- 引入webpack

const webpack = require('webpack')

配置webpack热部署模块（写在webpack.config.js的plugins中）

    new webpack.HotModuleReplacementPlugin(), // 热部署模块
    new webpack.NamedModulesPlugin(),

  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), // 热部署模块
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin ({
      title: '自定义标题',
      minify: {
        removeComments: true, // 打包后移除html文件中的注释
        collapseWhitespace: true, // 打包后移除html文件中的空白符
        minifyCSS: true // 压缩内联css
      },
      template: './public/index.html', // 生成html文件所需要的模板文件
      filename: 'index.html' // 配置生成的html文件名称
    })
  ],

注意点只要配置文件更改都需要重启项目

安装vue相关依赖（为啦识别vue文件）

cmd运行npm install vue vue-router vue-loader vue-template-compiler --save-dev
在webpack.config.js 上边引入vue插件

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

然后在webpack.config.js的plugins中引用

  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), // 热部署模块
    new webpack.NamedModulesPlugin(),
    new VueLoaderPlugin(),//引用vue插件
    new HtmlWebpackPlugin ({
      title: '自定义标题',
      minify: {
        removeComments: true, // 打包后移除html文件中的注释
        collapseWhitespace: true, // 打包后移除html文件中的空白符
        minifyCSS: true // 压缩内联css
      },
      template: './public/index.html', // 生成html文件所需要的模板文件
      filename: 'index.html' // 配置生成的html文件名称
    })
  ],

配置vue规则（在webpack.config.js的module）

// 在webpack.config.js中添加配置
   module: {
        rules: [
        {
            test: /\.js$/,  // 使用正则来匹配 js 文件
            exclude: '/node_modules/',  // 排除依赖包文件夹  //告诉系统那个文件不使用bable依赖 不进行转义
            use: {
            loader: 'babel-loader' // 使用 babel-loader //告诉系统使用那个loader  
            }
        },
        {
          test: /\.vue$/, //vue规则
          loader: 'vue-loader' // 使用 vue-loade //告诉系统使用那个loader  
      }
        ]
    },

在根目录的src中新建App.vue（默认渲染文件）配置代码如下

<template>
  <div>
  这是vue
  </div>
</template>

配置main.js（渲染vue）代码如下

import Vue from 'vue'
import App from './App.vue'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在public文件夹的的index.html中设置挂载点（实验一下能否正常运行）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%=htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- 这是模板html文件 -->
  <!-- <div>html文件</div> -->
  <div id="app"></div>  //设置挂载点
</body>
</html>

webpack.config.js完整代码

//  该文件在webpack项目运行时会自动执行
const path = require('path') // 该模块不用下载可以直接使用

// 引入clean-webpack-plugin 插件 作用是每次打包会删除打包生成的文件夹并从新生成一个
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 引入自动生成html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 引入webpack

const webpack = require('webpack')

//引入vue插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// console.log('publicPath:' + __dirname + '/static/')
// console.log('path:' + path.resolve(__dirname, 'static'))
module.exports = {
  entry: {
    app: './src/main.js' // 需要打包的文件入口
  },
  output: {
    publicPath: '/', // js 引用的路径或者 CDN 地址
    path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录
    filename: 'bundle.js' // 打包后生产的 js 文件
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(), // 热部署模块
    new webpack.NamedModulesPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin ({
      title: '自定义标题',
      minify: {
        removeComments: true, // 打包后移除html文件中的注释
        collapseWhitespace: true, // 打包后移除html文件中的空白符
        minifyCSS: true // 压缩内联css
      },
      template: './public/index.html', // 生成html文件所需要的模板文件
      filename: 'index.html' // 配置生成的html文件名称
    })
  ],
  // 在webpack.config.js中添加配置
  module: {
        rules: [
        {
            test: /\.js$/,  // 使用正则来匹配 js 文件
            exclude: '/node_modules/',  // 排除依赖包文件夹  //告诉系统那个文件不使用bable依赖 不进行转义
            use: {
            loader: 'babel-loader' // 使用 babel-loader //告诉系统使用那个loader  
            }
        },
        {
          test: /\.vue$/, //vue规则
          loader: 'vue-loader' // 使用 vue-loade //告诉系统使用那个loader  
      }
        ]
    },
  mode: 'development', // 开发模式
  devtool: 'source-map', // 开启调试
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3000, // 本地服务器端口号
    hot: true, // 热重载
    overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
    historyApiFallback: {
      // HTML5 history模式
      rewrites: [{ from: /.*/, to: '/index.html' }]
    }
  }
}

运行npm run serve看项目是否能正常运行

完善vue结构

在src中新建文件夹views
- 新建 Home.vue文件配置如下

<template>
  <div class="home">
    这是home页面
  </div>
</template>

在src中新建文件夹components
在src中新建文件夹router
- 新建主路由文件index.js配置如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  }
]

let router = new VueRouter({
  routes
})

export default router

然后在main.js中引入

import Vue from 'vue'
import router from './router/index'
import App from './App.vue'
new Vue ({
    el:'#app',
    router,
    render: h=>h(App)
})

在App.vue中加上路由使其显示默认页面

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

这样就完成啦一个vue项目的搭建 =。=

this.齐天

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
webpack搭建vue项目零基础搭建

webpack搭建vuewebpack搭建vue项目步骤详解初始化package.json文件合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入webpack搭建vue项目步骤详解自己在搭建vue是遇到很多问题也查啦很多，摸索着搭建完成，在
复制链接

扫一扫