资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Webpack4 从零搭建 Vue 项目

Webpack4 从零搭建 Vue 项目

Miracle_lihb / 3041人阅读

摘要：更改文件配置输入命令下载配置中的如果要打包或者其它，再安装对应的。

作者：NCUHOME-FED   Flura的博客
已经获得原作者授权
主要设置 创建项目

新建一个项目文件夹

npm init -y 初始化 package.json

安装 webpack 依赖包

npm install --save-dev webpack webpack-cli webpack-dev-server

  devServer: {
    contentBase: path.join(__dirname, "./dist"),
    host: "localhost",  //  可以设置0.0.0.0 ,这样设置你可以通过127.0.0.1或则localhost去访问
    open: true,       //  项目启动时,会默认帮你打开浏览器
    port: 8088,
    // hot: true    //在单页面应用开发中,我们修改了代码后是整个页面都刷新,开启hot后,将只刷新对应的组件
  }
安装 Vue

npm install vue

npm install -D vue-loader vue-template-compiler

vue-loader webpack配置 参考官方文档-手动设置

 // webpack.base.config.js
      const VueLoaderPlugin = require("vue-loader/lib/plugin")
  module.exports = {
  module: {
      rules: [
      // ... 其它规则
      {
          test: /.vue$/,
          loader: "vue-loader"
      }
      ]
  },
  plugins: [
      // 请确保引入这个插件！
      new VueLoaderPlugin()
  ]
 }
config详细配置

新建一个src文件夹，并在src文件下新建index.js，在根目录下新建webpack.config.js

webpack.config.js的配置

​ webpack.config.js 配置，webpack-dev-server工具的使用。

html-webpack-plugin 可以指定template模板文件，将会在output目录下，生成html文件，并引入打包后的js.

安装依赖:

npm install --save-dev html-webpack-plugin

配置webpack.config.js module中的rules

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    //...other code
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src/index.html")
        })
    ]

}
const path = require("path")
const htmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "/dist"),//打包生成文件地址    
    filename: "bundle.js",
    // publicPath: "/dist/"//文件输出的公共路径
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        exclude: /node_modules/,
        use: [
          "vue-loader"
        ]
      },
      {
        test: /.css$/,
        exclude: /node_modules/,
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /.js?$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/react"],
              plugins: [
                [require("@babel/plugin-proposal-decorators"), { "legacy": true }]
              ]
            }
          }
        ],
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./index.html"
    }),
    new VueLoaderPlugin()  // vueLoader插件 允许你以一种名为单文件组件的格式撰写 Vue 组件
  ],
  devServer: {
    contentBase: path.join(__dirname, "./dist"),
    host: "localhost",  //  可以设置0.0.0.0 ,这样设置你可以通过127.0.0.1或则localhost去访问
    open: true,       //  项目启动时,会默认帮你打开浏览器
    port: 8088,
    // hot: true    //在单页面应用开发中,我们修改了代码后是整个页面都刷新,开启hot后,将只刷新对应的组件
  }
}
创建项目目录文件

在根目录下创建一个index.html文件作为启动页面，一个webpack.config.js作为webpack配置文件(实际项目中这里会有webpack配置文件，分别用于开发环境和生产环境，这里简便起见就用一个配置文件) ,再创建一个App.vue文件。

cet-query
├─ index.html 启动页面
├─ package-lock.json
├─ package.json 包管理
├─ src
│    └─ index.js 入口文件
|     └─ App.vue 
└─ webpack.config.js  webpack配置文件

index.html




  
  
  
  cet-query title

index.js

import Vue from "vue"
import App from "./App.vue"

const root = document.createElement("div") //创建div节点
document.body.appendChild(root) //将div节点添加到body下

new Vue({
  render: (h) => h(App)  //vue在创建Vue实例时,通过调用render方法来渲染实例的DOM树,也就是这个组件渲染的是App的内容
                        //vue在调用render方法时,会传入一个createElement函数作为参数,也就是这里的h的实参是createElement函数,然后createElement会以App为参数进行调用
}).$mount(root)

App.vue
添加启动脚本

在package.json添加启动脚本命令

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --mode=development --progress --hide-modules",
    "dev": "webpack-dev-server --mode=development"
  },

这样执行npm run dev就能启动成功了， npm run build也能打包生成dist文件

其它扩展处理 引入babel-loader兼容代码

babel-preset-env 帮助我们配置 babel。我们只需要告诉它我们要兼容的情况（目标运行环境），它就会自动把代码转换为兼容对应环境的代码。ES6/ES7/JSX 转义需要 Babel 的依赖，支持装饰器。

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-object-rest-spread

更改webpack.config.js文件

{
  test: /.js?$/,
  use: [
    {
      loader: "babel-loader",
      options: {
        presets: ["@babel/preset-env", "@babel/react"],
        plugins: [
          [require("@babel/plugin-proposal-decorators"), { "legacy": true }]
        ]
      }
    }
  ],
  include: path.resolve(__dirname, "src"),
  exclude: /node_modules/
},
配置css

输入命令下载style-loader css-loader

npm i style-loader css-loader -D

配置webpack.config.js module中的rules

{
  test: /.css$/,
  exclude: /node_modules/,
  use: [
    "style-loader",
    "css-loader"
  ]
}

如果要打包scss或者其它，再安装对应的loader。

支持sass

输入命令下载sass-loader node-sass

npm i sass-loader node-sass -D
复制代码

修改webpack.config.js的css

{   
  test: /.sass$/,   
  use:["vue-style-loader", 
     "css-loader", "sass-loader" 
  ],   
  include: path.resolve(__dirname + "/src/"),    
  exclude: /node_modules/ 
},
支持图片

输入命令下载file-loader url-loader

npm i file-loader url-loader -D

配置webpack.config.js module中的rules

{   
  test: /.(jpg|png|gif|svg)$/,   
  use: "url-loader",   
  include: path.resolve(__dirname + "/src/"),   
  exclude: /node_modules/ 
}
完整的文件参考 webpack.config.js文件 
const path = require("path")  //path是Nodejs中的基本包,用来处理路径
const htmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "/dist"),  //打包生成文件地址    
    filename: "bundle.js",
    // publicPath: "/dist/"  //文件输出的公共路径
  },
  module: {  
    rules: [     //针对不同类型的文件,我们定义不同的识别规则,最终目的都是打包成js文件
      {
        test: /.vue$/,
        exclude: /node_modules/,
        use: [
          "vue-loader"     //处理.vue文件
        ]
      },
      {
        test: /.css$/,     //处理css
        exclude: /node_modules/,
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /.js?$/,    //处理js
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/react"],
              plugins: [
                [require("@babel/plugin-proposal-decorators"), { "legacy": true }]
              ]
            }
          }
        ],
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/
      },
      {
        test: /.(png|gif|jpg|jpeg|svg)$/,     //处理图片
        exclude: /node_modules/,
        use: [
          "url-loader"
        ]
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./index.html"
    }),
    new VueLoaderPlugin()  // vueLoader插件 允许你以一种名为单文件组件的格式撰写 Vue 组件
  ],
  devServer: {
    contentBase: path.join(__dirname, "./dist"),
    host: "localhost",  //  可以设置0.0.0.0 ,这样设置你可以通过127.0.0.1或则localhost去访问
    open: true,       //  项目启动时,会默认帮你打开浏览器
    port: 8088,
    // hot: true         //在单页面应用开发中,我们修改了代码后是整个页面都刷新,开启hot后,将只刷新对应的组件
  }
}
package.json文件 
{
  "name": "cet-query",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --mode=development --progress --hide-modules",
    "dev": "webpack-dev-server --mode=development"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/fuchengjx/cet-query.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/fuchengjx/cet-query/issues"
  },
  "homepage": "https://github.com/fuchengjx/cet-query#readme",
  "dependencies": {
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}
云服务器 GPU云服务器 云服务器搭建vue项目 阿里云服务器搭建vue项目 从零搭建云服务器 腾讯云服务器部署vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106418.html

相关文章

  • 为什么我不推荐你使用vue-cli创建脚手架？

    摘要：后来经过排查你会发现是由于目前还没有版本。可以使用该方式解决。这就是我为什么不推荐你使用创建脚手架的原因此文的受众是想要进阶中级的初级前端人员。 最近在知乎看到一个问题，原问题如下： 很奇怪，为什么现在能找到自己手动创建vue脚手架的文章非常少，而且大家似乎对webpack4的热情并不高，对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜。难道现在一般的做...

    trigkit4 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

  • webpack4 的开发环境配置说明

    摘要：的开发环境配置说明完整的的配置地址开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们。的做法是在的字段配置类似这样这样配置后，当运行时，在里通过可以取到值以来做判断就可以啦。 webpack4 的开发环境配置说明 完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 开发环境的搭建，总体而言就比较轻松，因为用户就是开发者们...

    fancyLuo 评论0 收藏0

发表评论

登陆后可评论

0条评论

Miracle_lihb

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<