win10下，webpack创建vue项目

最新推荐文章于 2024-02-04 17:11:01 发布

Myron.Maoyz

最新推荐文章于 2024-02-04 17:11:01 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.csdn.net/justflow/article/details/119189030

版权

Vue 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

创建vue项目，就我目前学习了以下3中方案，各有特点。

第一种是之前的文章就讲过的vue-cli创建vue项目，参考：https://blog.csdn.net/justflow/article/details/109273620

第二种是vue-cli 创建webpack模版的vue项目，基本和上面的方式相同，就是起始命令有点差异

# vue init webpack project-name

以上两种基本都是基于vue的脚手架vue-cli来实现项目创建的。

第三种就是完全和vue-cli无关了，而是完全依赖webpack的模式来创建vue的项目，下面详细来讲这个步骤。参考帖子，见底部。

这里的安装系统环境还是win10

1. 环境安装

安装NodeJs 16.3.0，Webpack，webpack-cli 之前有写过，参考https://blog.csdn.net/justflow/article/details/109273620 的第一，第二步，有选择的安装nodejs16.3.0，webpack5.47.1，webpack-cli4.7.2

剩下的webpack-dev-server3.11.2的安装指令

> npm install -g webpack-dev-server --registry=https://registry.npm.taobao.org

确认各版本

> node --version
v16.3.0

> npm --version
7.17.0

> webpack --version
webpack 5.47.1
webpack-cli 4.7.2
webpack-dev-server 3.11.2

2.创建项目目录结构

用管理员权限打开cmd命令行模式，创建项目目录webpack_vue,进入webpack_vue目录，执行命令npm init

> mkdir webpack_vue
> cd webpack_vue
> npm init

可以随意设置，或者一路回车，这里因为vue的入口文件一般是main.js，所以entry point：main.js

package name: (webpack_vue) 
version: (1.0.0) 
description: 
entry point: (index.js) main.js 
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\DevelopSpace\webpack_vue\package.json:
save it as a dependency in the package.json file.
{
  "name": "webpack_vue",quit.
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

就会生成一个package.json文件，里面基本就是刚才设置的内容，也可以不执行npm init，直接创建package.json，结果一样的。

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

补上webpack在package.json中。由于webpack-cli和webpack-dev-server存在版本冲突，不能再随意的安装最新版本了，这里几个主要包需要指定主版本，可以通过npm view package versions来确认package目前的版本情况，有选择的安装指定版本。

这里，webpack最新是5.48.0，但受限webpack-dev-server当前最新版本为3.11.2，对应的webpack-cli的主版本只能是3.3，导致webpack只能选4，其他的webpack-merge，html-webpack-plugin都降一个主版本选择。

在webpacke_vue目录下执行

> npm install webpack@^4 webpack-cli@3.3.12 webpack-merge@4.2.2 html-webpack-plugin@4.5.2  webpack-dev-server@3.11.2--save-dev --registry=https://registry.npm.taobao.org

> npm list webpack -D
webpack_vue@1.0.0 D:\DevelopSpace\webpack_vue
├─┬ html-webpack-plugin@4.5.2
│ └── webpack@4.46.0 deduped
├─┬ webpack-cli@3.3.12
│ └── webpack@4.46.0 deduped
├─┬ webpack-dev-server@3.11.2
│ ├─┬ webpack-dev-middleware@3.7.3
│ │ └── webpack@4.46.0 deduped
│ └── webpack@4.46.0 deduped
└─┬ webpack@4.46.0
  └─┬ terser-webpack-plugin@1.4.5
    └── webpack@4.46.0 deduped

2. 搭建项目目录

├── config/                      # webpack config files
│   |
|   |----webpack.config.js
|   |----webpack.dev.config.js
|—— pubic
|   |---- index.html            # index.html template
├── src/
│   ├── main.js                 # app entry file       
├── package.json                # build scripts and dependencies
└── README.md                   # Default README file

3.创建webpack配置文件

创建webpack.config.js

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

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'compiled/js/[name]-[hash:8].js',
        chunkFilename: 'compiled/js/[name]-[chunkhash:8].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            hash: true
        })
    ]
}

创建webpack.dev.config.js

const merge = require('webpack-merge')
const common = require('./webpack.config')

module.exports = merge(common, {
    devtool: 'source-map',
    devServer: {
        contentBase: './public',//服务器加载的目录，会自动找到该目录下的index.html文件进行页面展示
        historyApiFallback: true,
        host: '127.0.0.1',  // 一般设置为0.0.0.0 可以供localhost访问和供别人ip访问
        port: 8008,  // 端口
        open: true, // 自动打开浏览器
        compress: true,
    }
})

扩充package.json

{

  .......

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config config/webpack.build.config.js --mode production",
    "dev": "webpack-dev-server --hot --config config/webpack.dev.config.js --mode development"
  },

  ......

}

build=> wepack --config webpack.build.config.js --mode producton

wepack ：接触wepack的都会看到这个命令，就是打包命令

--config ：配置指定引用那个配置文件，默认引用webpack.config.js 文件

--mode: 有两个配置，一个开发配置，一个生产配置，production就是生产配置，development就是开发配置

dev=> webpack-dev-server --hot --config webpack.dev.config.js --mode development

webpack-dev-server: 启动webpackServer服务

--hot: 启用热加载

4. 编译运行 npm run dev

> npm run dev

..........
..........
    + 19 hidden modules
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/view/index.html] 238 bytes {HtmlWebpackPlugin_0} [built]
i ｢wdm｣: Compiled successfully.

表示基本的webpack相关包都没有问题了。

5.安装Vue项目必须的一些package

 > npm install vue@^2 css_load@^5 vue-loader babel-loader vue-router element-ui --save

注意：

我刚开始的时候，先安装了vue2，之后单独安装vue-load，怎么都装不上，指定大版本15，14，13都不行，不得不详细看出错信息

> npm install vue-loader@^14 -S
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: webpack_vue@1.0.0
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^4.46.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^5.0.0" from css-loader@6.2.0
npm ERR! node_modules/css-loader
npm ERR!   peer css-loader@"*" from vue-loader@14.2.4
npm ERR!     vue-loader@"14" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\sagit\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\sagit\AppData\Local\npm-cache\_logs\2021-08-03T05_12_46_947Z-debug.log

里面都提到css-loader@6.2.0，需要webpack5，而我已经安装的是webpack4，所以我尝试了先单独安装cess-loader，主版本选5，安装成功，再来安装vue-loader，也不用指定版本，直接就是最新版，也就直接成功了。

> npm install css-loader@^5 -S
3 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.


> npm install vue-loader -S    
4 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

6.创建vue项目结构文件

我们参考常规的vue项目的结构目录，在项目目录下新建目录，\src\views。

在\src\views目录下，创建Test.vue文件

<template>
    <div>
        <H1>This Test ...</H1>
    </div>
</template>
 
<script>
    export default {
        name: "test"//组件名称
    }
</script>
 
<style scoped>
 
</style>

在 \src 目录下，创建App.vue文件

<template>
    <test></test><!-- 使用组件 -->
</template>
 
<script>
    import Test from "./views/Test.vue";//引入组件
    export default {
        components: {Test}//引入组件
    }
</script>
 
<style scoped>
 
</style>

在\src目录下，创建main.js文件

import Vue from 'vue'//引入vue
import App from './App.vue'//引入页面
 
new Vue({
    el: '#app',
    render: h => h(App)//页面最开始展示的页面
})

在\config目录下，编辑webpack.config.js

const { VueLoaderPlugin } = require('vue-loader');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'compiled/js/[name]-[hash:8].js',
        chunkFilename: 'compiled/js/[name]-[chunkhash:8].js'
    },
    module: {
        rules: [{
            test: /\.vue$/,//vue文件加载器
            use: ['vue-loader']
        }, {
            test: /\.js$/,//js文件加载器
            use: ['babel-loader'],
            exclude: /node_modules/
        }, {
            test: /\.less$/,//lsaa文件加载器
            use: ["style-loader", "css-loader", "less-loader"]
        }, {
            test: /\.css$/,//css文件加载器
            use: ["style-loader", "css-loader"]
        }]
    },
    plugins: [
        // 添加VueLoaderPlugin，以响应vue-loader
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            hash: true
        })
    ]
}

在\config目录下，创建webpack.build.config.js

const { merge }= require('webpack-merge');//用于合并两个配置文件的工具
const common = require('./webpack.config.js');//加载之前定义的配置文件
const HtmlWebpackPlugin = require('html-webpack-plugin');//HTTPWebpackPlugin这个会经常用到，是可以将你所有配置好的东西打包成一个html文件，功能很强大，我在这简单介绍一下怎么用，具体的大家可以自行了解
module.exports = merge(common, {
    output: {
        path: __dirname + "/../dist/",//打包后输出的文件地址，我这里配置的地址是我项目中SpringMVC存放页面的地方，如果你只需要前台请自行修改这里的配置，其实不修改也行，它会自动创建这个地址的，__dirname是webpack中的全局关键字，存放的项目的根目录的绝对路径
        filename: "[name].js"//打包后输出的文件名，[name]就是使用入口文件的key做名称
    },
   
    devtool: 'inline-source-map'//开启控制台输出错误信息具体在哪行
});

7.验证Vue项目入口