webpack 搭建VUE项目步骤详解

最新推荐文章于 2024-06-13 10:29:49 发布

昨夜太平长安888

最新推荐文章于 2024-06-13 10:29:49 发布

阅读量2.2k

点赞数 11

分类专栏： webpack Vue 文章标签： webpack npm vue.js

本文链接：https://blog.csdn.net/HelloWord176/article/details/105855920

版权

Vue 同时被 2 个专栏收录

59 篇文章 3 订阅

订阅专栏

webpack

1 篇文章 0 订阅

订阅专栏

首先我们先了解为什么要使用webpack？？？

Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。要使用 Webpack 前须先安装Node.js。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

环境配置搭建：1 感谢大佬的技术文档支持 2 参考文献

1.创建空文件夹，通过运行以下命令初始化 package.json

npm init -y

npm init 用来初始化生成一个新的 package.json 文件。它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。如果使用了 -y（代表 yes），则跳过提问阶段，直接生成一个新的 package.json 文件。

2. 引入安装 webpack；

npm i webpack --save-dev

如果觉得安装的太慢的话我们可以使用淘宝镜像运行以下命令就可以

cnpm install webpack --save-dev

3. 还需要 webpack-cli 脚手架，作为一个单独的包引入，如果不装 webpack-cli 是无法在命令行里使用 webpack 的，安装完成之后我们可以使用webpack了；

npm i webpack-cli --save-dev
如果觉得慢，我们可以使用：
cnpm i webpack-cli --save-dev

此项目 webpack 版本如下：

"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"

4. 配置自己的打包命令（现在打开 package.json 并添加一个 build(构建) 脚本：）

5. 运行一下看会发生什么：

npm run build

这里报错的意思是： “未能在 ./src 目录中找到 Entry 入口点”，Entry point（入口点）是webpack寻找开始构建JS包的文件，

6. 从 webpack4 开始，不再必须定义 entry point(入口点) ：它将默认为 ./src/index.js，所以就需要我们手动建一个 src 的文件夹，并在里面创建一个 index.js 的文件。

7. 我们在运行一下看看效果：

npm run build

8. 打包成功，并在当前的根目录中得到打包后的文件夹，也就是 dist 文件夹

它将查找 ./src/index.js 作为默认入口点。而且，它会在 ./dist/main.js 中输出模块包，可以看下效果

9. 我们刚刚运行的时候会看到提示警告：

这里的意思是：→ 配置中的警告：尚未设置“mode”选项，webpack将为此值回退到“production”。将“mode”选项设置为“development”或“production”，以启用每个环境的默认值。您还可以将其设置为 'none' 以禁用任何默认行为。

一个典型的项目可能有：

用于开发的配置文件，配置热更新、跨域配置、端口设置等（"dev": "webpack --mode development"）；
用于生产的配置文件，配置 js 压缩、代码拆分等（"build": "webpack --mode production"）；

webpack4 引入了 production(生产) 和 development(开发) 模式。

所以我们需要打开 package.json 并填充 script 部分

我们再来运行一下： npm run build

这样就好了。。。

10. 我们创建VUE中要用的文件

1. 我们需要在 src 文件夹中创建如下文件夹：

assets 这个文件夹里面是存放我们的静态文件的；
components 这个文件夹里面是存放我们的组件的；
router 这个文件夹里面是存放我们路由的，用于页面之间的相互跳转；
views 这个文件夹里面是存放我们VUE文件的；
另外还需要创建一个 main.js 的文件，这是我们主js文件；

2. 在根目录文件夹下创建 webpack.config.js 文件，这个文件主要是用来配置文件的；

11. 在webpack.config.js文件中配置入口,出口文件

首先在根目录文件夹中创建 public 文件夹：

并创建 index.html 文件

这个文件是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html。

//入口默认是 src中的 index.js 文件，我们这里需要修改一下，配置完之后 npm run build 运行一下，我们的入口文件就修改成了main.js文件了
const path = require('path')  //引入path
module.exports = {
    entry: './src/main.js', //入口文件
    output: {  //出口文件
        publicPath: '/',   //资源引入路径
        path:path.resolve(__dirname, 'dist'),   //输出文件 把项目打包成的 路径 以及文件夹名称
        filename: 'index.js',   //把我们的项目主文件打包后生产的js文件
    }

path.resolve() ：方法会把一个路径或路径片段的序列解析为一个绝对路径；

__dirname : 当前模块的文件夹名称；

12. 打包完 dist 中有多个文件，这是因为打包的时候，没有先删除 dist 文件，再打包，我们需要使用一个插件来帮我们实现

通过如下指令进行安装：

npm install clean-webpack-plugin --save-dev

//如果觉得下载慢的话，我们可以使用淘宝镜像进行下载：
cnpm install clean-webpack-plugin --save-dev

安装完插件之后我们需要对其进行配置

const path = require('path')  //引入path
const { CleanWebpackPlugin } = require('clean-webpack-plugin')  // 引入我们下载的插件
module.exports = {
    entry: './src/main.js', //入口文件
    output: {  //出口文件
        publicPath: '/',   //资源引入路径
        path:path.resolve(__dirname, 'dist'),   //输出文件 把项目打包成的 路径 以及文件夹名称
        filename: 'index.js',   //把我们的项目主文件打包后生产的js文件
    },
    plugins: [
        new CleanWebpackPlugin() //默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。
    ]
}

注意!!!如果安装的 clean-webpack-plugin 是 3.0 版本的，配置要更改为：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

之后再执行 npm run build 就可以了

打包后的 js 文件会按照我们的配置放在 dist 目录下，创建一个 html 文件，引用打包好的 js 文件

13. 用Babel 7 转译 ES6

现代 Javascript 主要是用 ES6 编写的。但并非每个浏览器都知道如何处理 ES6。我们需要某种转换，这个转换步骤称为 transpiling(转译)。transpiling(转译) 是指采用 ES6 语法，转译为旧浏览器可以理解的行为。

Webpack 不知道如何进行转换但是有 loader(加载器) ：将它们视为转译器。

babel-loader 是一个 webpack 的 loader(加载器)，用于将 ES6 及以上版本转译至 ES5

要开始使用 loader ，我们需要安装一堆依赖项

① 通过以下指令安装依赖包：

npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
//如果觉得下载慢的话 可以使用：

cnpm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev

安装运行环境:

npm i @babel/polyfill @babel/runtime

cnpm i @babel/polyfill @babel/runtime //(建议使用)

②在项目的根目录中创建名为 .babelrc 的新文件来配置 Babel:

安装 npm install --save core-js@3 还需要设置 .babelrc 设置 "corejs": 3

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

③ 在webpack.config.js配置（webpack 配置 loader(加载器)③ webpack 配置 loader(加载器)）

module: {
  rules: [
    {
      test: /\.js$/, // 使用正则来匹配 js 文件
      exclude: /node_modules/, // 排除依赖包文件夹
      use: {
        loader: 'babel-loader' // 使用 babel-loader
      }
    }
  ]
}

14. 安装自动生成 HTML 文件的插件：

①通过以下指令就行安装：

cnpm install html-webpack-plugin --save-dev

②安装完成之后我么对其进行配置：

首先在webpack.config.js文件中引入这个插件：

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

引进来之后我们要在 plugins 中使用：

        new HtmlWebpackPlugin({ //使用我们的自动生成HTML插件，并对其相应的参数进行设置
            title: 'webpack搭建VUE项目',
            minify:{
                removeComments: true, //是否删除HTML中的注释
                collapseWhitespace: true, //是否删除HTML中多余的空格
                minifyCSS: true //是否要压缩我们的css文件
            },
            template: './public/index.html', //告诉我们的webpack打包的时候用哪一个作为模版文件生成HTML结构
            filename:  'index.html', //要生成什么名字的文件
        })

HtmlWebpackPlugin 是在 plugin 这个选项中配置的。常用参数含义如下：

title: 打包后生成 html 的 title
filename：打包后的 html 文件名称
template：模板文件（例子源码中根目录下的 index.html）
chunks：和 entry 配置中相匹配，支持多页面、多入口
minify：压缩选项

③ 由于使用了 title 选项，则需要在 template 选项对应的 html 的 title 中加入 <%= htmlWebpackPlugin.options.title %>

15. 为了让项目跑起来，我们需要启用一个本地服务器

① 安装依赖包

npm i webpack-dev-server --save-dev
下载慢的话 可以使用：
cnpm i webpack-dev-server --save-dev

② 在 package.json 中添加启动项目的脚本

"start": "webpack-dev-server --open"

③ 在 webpack.config.js 中引入 webpack 进行相关配置；

const webpack = require('webpack') //引入webpack

将模式设置为开发模式：

mode: 'development'

开启调试：

devtool: 'source-map'

对服务器进行设置：

    devServer: {  //对服务器进行相关配置
        contentBase: path.join(__dirname, 'dist'),
        port: 8000, // 本地服务器端口号
        hot: true, // 热重载
        overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
        proxy: {
          // 跨域代理转发
          '/comments': {
            target: 'https://m.weibo.cn',
            changeOrigin: true,
            logLevel: 'debug',
            headers: {
              Cookie: ''
            }
          }
        },
        historyApiFallback: {
          // HTML5 history模式
          rewrites: [{ from: /.*/, to: '/index.html' }]
        }
    }

使用热部署模块：

模块热更新需要 HotModuleReplacementPlugin 和 NamedModulesPlugin 这两个插件，并且顺序不能错，并且指定 devServer.hot 为 true

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

webpack.config.js 完整的配置文件如下：

// 这个文件的主要功能是配置一些东西

//配置一下入口,出口文件，入口默认是 src中的 index.js 文件，我们这里需要修改一下，配置完之后 npm run build 运行一下，我们的入口文件就修改成了main.js文件了
const path = require('path')  //引入path
const { CleanWebpackPlugin } = require('clean-webpack-plugin')  // 引入我们下载的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')  // 引入自动生成HTML的插件
const webpack = require('webpack') //引入webpack
module.exports = {
    entry: './src/main.js', //入口文件
    output: {  //出口文件
        publicPath: '/',   //资源引入路径
        path:path.resolve(__dirname, 'dist'),   //输出文件 把项目打包成的 路径 以及文件夹名称
        filename: 'index.js',   //把我们的项目主文件打包后生产的js文件
    },
    plugins: [ // plugins插件
        new CleanWebpackPlugin(),//默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。
        new HtmlWebpackPlugin({ //使用我们的自动生成HTML插件，并对其相应的参数进行设置
            title: 'webpack搭建VUE项目',
            minify:{
                removeComments: true, //是否删除HTML中的注释
                collapseWhitespace: true, //是否删除HTML中多余的空格
                minifyCSS: true //是否要压缩我们的css文件
            },
            template: './public/index.html', //告诉我们的webpack打包的时候用哪一个作为模版文件生成HTML结构
            filename:  'index.html', //要生成什么名字的文件
        }),
        new webpack.HotModuleReplacementPlugin(), // 热部署模块
        new webpack.NamedModulesPlugin()
    ],

    mode: 'development', // 将模式设置为开发模式
    devtool: 'source-map', //开启调试
    devServer: {  //对服务器进行相关配置
        contentBase: path.join(__dirname, 'dist'),
        port: 8000, // 本地服务器端口号
        hot: true, // 热重载
        overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
        proxy: {
          // 跨域代理转发
          '/comments': {
            target: 'https://m.weibo.cn',
            changeOrigin: true,
            logLevel: 'debug',
            headers: {
              Cookie: ''
            }
          }
        },
        historyApiFallback: {
          // HTML5 history模式
          rewrites: [{ from: /.*/, to: '/index.html' }]
        }
    },

    //配置 loader(加载器)，用于将 ES6 及以上版本转译至 ES5
    module: {
        rules: [
          {
            test: /\.js$/, // 使用正则来匹配 js 文件
            exclude: /node_modules/, // 排除依赖包文件夹
            use: {
              loader: 'babel-loader' // 使用 babel-loader
            }
          }
        ]
      }
}

16 . 在根目录创建一个.gitigonre文件夹来指定 git 忽略的文件，所有 git 操作均不会对其生效；

17. 在根目录创建一个.browserslist 文件夹，用来处理css文件对各个浏览器的兼容问题，会添加的相应 CSS 浏览器前缀。

将以下内容添加到 package.json 时，所有工具都会自动找到目标浏览器：

"browserslist": [
  "> 1%",
  "last 2 version",
  "not ie <= 8"
]

也可以创建 .browserslistrc 文件单独写配置

# 所支持的浏览器版本

> 1% # 全球使用情况统计选择的浏览器版本

last 2 version # 每个浏览器的最后两个版本

not ie <= 8 # 排除小于 ie8 以下的浏览器

17. 在根目录创建一个 README.md 的文件，可以写一些注释之类的东西

18. 上面一切都配置好了之后，我们开始安装我们的vue

通过以下指令进行安装：

npm install vue --save
快一点话，可以使用淘宝镜像进行安装：
cnpm install vue --save

安装完成之后，我们需要配置一下webpack搭建VUE项目所必需要配置的 vue + vue-router + vue-loader + vue-template-compiler 项目配置

我们先下载相关配置：

npm install vue vue-router vue-loader vue-template-compiler --save-dev
or 
cnpm install vue vue-router vue-loader vue-template-compiler --save-dev

下载完成之后，我们在 webpack.config.js 文件中通过以下代码进行引入并使用

const VueLoaderPlugin = require('vue-loader/lib/plugin') // 引入下载完的vue-loader
new VueLoaderPlugin(),

webpack.config.js 文件如下：

// 这个文件的主要功能是配置一些东西

//配置一下入口,出口文件，入口默认是 src中的 index.js 文件，我们这里需要修改一下，配置完之后 npm run build 运行一下，我们的入口文件就修改成了main.js文件了
const path = require('path')  //引入path
const { CleanWebpackPlugin } = require('clean-webpack-plugin')  // 引入我们下载的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')  // 引入自动生成HTML的插件
const webpack = require('webpack') //引入webpack
const VueLoaderPlugin = require('vue-loader/lib/plugin') // 引入下载完的vue-loader
module.exports = {
    entry: './src/main.js', //入口文件
    output: {  //出口文件
        publicPath: '/',   //资源引入路径
        path:path.resolve(__dirname, 'dist'),   //输出文件 把项目打包成的 路径 以及文件夹名称
        filename: 'index.js',   //把我们的项目主文件打包后生产的js文件
    },
    plugins: [ // plugins插件
        new CleanWebpackPlugin(),//默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。
        new HtmlWebpackPlugin({ //使用我们的自动生成HTML插件，并对其相应的参数进行设置
            title: 'webpack搭建VUE项目',
            minify:{
                removeComments: true, //是否删除HTML中的注释
                collapseWhitespace: true, //是否删除HTML中多余的空格
                minifyCSS: true //是否要压缩我们的css文件
            },
            template: './public/index.html', //告诉我们的webpack打包的时候用哪一个作为模版文件生成HTML结构
            filename:  'index.html', //要生成什么名字的文件
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(), // 热部署模块
        new webpack.NamedModulesPlugin()
    ],

    mode: 'development', // 将模式设置为开发模式
    devtool: 'source-map', //开启调试
    devServer: {  //对服务器进行相关配置
        contentBase: path.join(__dirname, 'dist'),
        port: 8000, // 本地服务器端口号
        hot: true, // 热重载
        overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
        proxy: {
          // 跨域代理转发
          '/comments': {
            target: 'https://m.weibo.cn',
            changeOrigin: true,
            logLevel: 'debug',
            headers: {
              Cookie: ''
            }
          }
        },
        historyApiFallback: {
          // HTML5 history模式
          rewrites: [{ from: /.*/, to: '/index.html' }]
        }
    },

    //配置 loader(加载器)，用于将 ES6 及以上版本转译至 ES5
    module: {
        rules: [
          {
            test: /\.js$/, // 使用正则来匹配 js 文件
            exclude: /node_modules/, // 排除依赖包文件夹
            use: {
              loader: 'babel-loader' // 使用 babel-loader
            }
          }
        ]
      }
}

之后我们在 src 文件中创建一个 App.vue 文件

接下来我们需要在我们的 main.js 文件中将我们的VUE引入进来

引入进来之后我们在 webpack.config.js 文件中写一下规则

          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }

// 这个文件的主要功能是配置一些东西

//配置一下入口,出口文件，入口默认是 src中的 index.js 文件，我们这里需要修改一下，配置完之后 npm run build 运行一下，我们的入口文件就修改成了main.js文件了
const path = require('path')  //引入path
const { CleanWebpackPlugin } = require('clean-webpack-plugin')  // 引入我们下载的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')  // 引入自动生成HTML的插件
const webpack = require('webpack') //引入webpack
const VueLoaderPlugin = require('vue-loader/lib/plugin') // 引入下载完的vue-loader
module.exports = {
    entry: './src/main.js', //入口文件
    output: {  //出口文件
        publicPath: '/',   //资源引入路径
        path:path.resolve(__dirname, 'dist'),   //输出文件 把项目打包成的 路径 以及文件夹名称
        filename: 'index.js',   //把我们的项目主文件打包后生产的js文件
    },
    plugins: [ // plugins插件
        new CleanWebpackPlugin(),//默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。
        new HtmlWebpackPlugin({ //使用我们的自动生成HTML插件，并对其相应的参数进行设置
            title: 'webpack搭建VUE项目',
            minify:{
                removeComments: true, //是否删除HTML中的注释
                collapseWhitespace: true, //是否删除HTML中多余的空格
                minifyCSS: true //是否要压缩我们的css文件
            },
            template: './public/index.html', //告诉我们的webpack打包的时候用哪一个作为模版文件生成HTML结构
            filename:  'index.html', //要生成什么名字的文件
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(), // 热部署模块
        new webpack.NamedModulesPlugin()
    ],

    mode: 'development', // 将模式设置为开发模式
    devtool: 'source-map', //开启调试
    devServer: {  //对服务器进行相关配置
        contentBase: path.join(__dirname, 'dist'),
        port: 8000, // 本地服务器端口号
        hot: true, // 热重载
        overlay: true, // 如果代码出错，会在浏览器页面弹出“浮动层”。类似于 vue-cli 等脚手架
        proxy: {
          // 跨域代理转发
          '/comments': {
            target: 'https://m.weibo.cn',
            changeOrigin: true,
            logLevel: 'debug',
            headers: {
              Cookie: ''
            }
          }
        },
        historyApiFallback: {
          // HTML5 history模式
          rewrites: [{ from: /.*/, to: '/index.html' }]
        }
    },

    //配置 loader(加载器)，用于将 ES6 及以上版本转译至 ES5
    module: {
        rules: [
          {
            test: /\.js$/, // 使用正则来匹配 js 文件
            exclude: /node_modules/, // 排除依赖包文件夹
            use: {
              loader: 'babel-loader' // 使用 babel-loader
            }
          },
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ]
      }
}

各个文件的目录：

public文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

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

App 文件：

<template>
    <div>
        <router-view>
        </router-view>
    </div>
</template>

main.js 文件：

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

昨夜太平长安888

关注

11
点赞
踩
33

收藏

觉得还不错? 一键收藏
4
评论
webpack 搭建VUE项目步骤详解

首先我们先了解为什么要使用webpack？？？ Webpack是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。要使用 Webpack 前须先安装Node.js。它做的事情是，分析你的项目结构，找到JavaSc...
复制链接

扫一扫