Vue2.0+Webpack构建流程详解：从初始化到项目搭建

78 浏览量更新于2024-08-30 收藏 523KB PDF 举报

在本文中，我们将深入探讨如何在 Vue 2.0 环境中集成和配置Webpack开发工具。首先，创建一个新的项目目录vue-wkdemo，并通过`npm init`初始化一个package.json文件，用于管理项目的配置和依赖。在这个过程中，你可以选择默认设置或快速生成。接着，安装必要的项目依赖，包括： 1. Webpack和其相关模块： - webpack: 用于模块打包和静态资源管理的核心构建工具。 - webpack-dev-server: 在本地服务器上运行应用，实时编译和刷新。 - vue-loader: 将Vue组件转换为Webpack可识别的模块格式。 - vue-html-loader: 处理HTML模板文件。 - css-loader: 处理CSS文件，使其能在Webpack中工作。 - vue-style-loader: 将CSS样式插入到JavaScript中，便于Vue组件使用。 - vue-hot-reload-api: 实现热加载功能，方便快速迭代。 - babel-loader: 用于处理ES6和ES7语法的转换。 - babel-core, babel-plugin-transform-runtime, babel-preset-es2015: Babel的组件，用于编译JavaScript。 - babel-runtime@5: Babel运行时，用于在生产环境中优化代码。 2. 插件和辅助工具： - html-webpack-plugin: 自动将HTML模板打包进dist目录。 - vue：作为主要的前端框架，用于构建用户界面。 3. 创建项目结构： - 新建一个入口文件index.js，放在vue-wkdemo/app/index/index.js中，引入Vue并配置Vue实例，开启调试模式，设置组件挂载点。 4. 编写index.html模板： - 在vue-wkdemo/app/index/index.html中，定义基本的HTML结构，包括meta标签、charset、页面标题以及Vue应用的根元素。这个构造过程确保了项目具备Vue2.0的功能，并通过Webpack进行模块化和打包，提供实时编译和热更新的能力。同时，HTML模板被正确地集成到Webpack的工作流中，使得Vue组件能够顺利运行在浏览器上。开发者可以在这个基础上继续扩展项目，添加其他组件、路由、样式等。

vue2.0+webpack环境的构造过程环境的构造过程

本文给大家介绍vue2.0+webpack环境构造过程。

1.首先新建一个目录vue-wkdemo，这是我们的项目目录。执行 npm init 命令生成package.json文件。执行npm init之后，会提示你填写一些项目的信息，一直回车默认就好了，或者

直接执行 npm init -y 直接跳过询问步骤。

2.安装项目依赖项

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader

vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev

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

npm install vue --save

3.新建入口文件index.js，文件位置放置为：vue-wkdemo->app->index->index.js

import Vue from 'Vue'

import Favlist from './components/Favlist.vue'

Vue.config.debug = true;//开启错误提示

window.onload = function () {

new Vue({

el: '#app',

components: {

'my-component': Favlist

}

});

}

4.构建index.html模版，文件位置放置为：vue-wkdemo->app->index->index.html

<!DOCTYPE html>

<head>

</head>

<body>

<my-component></my-component>

</div>

</body>

</html>

5.构建vue组件Favlist.vue ，文件放置为：vue-wkdemo->app->components->Favlist.vue

<div>

</div>

</template>

<style>

body {

color: red;

}

</style>

6.构建 webpack.config.js ，文件放置为：vue-wkdemo->build->webpack.config.js

// nodejs 中的path模块

var path = require('path');

var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

// 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件

entry: path.resolve(__dirname, '../app/index/index.js'),

// 输出配置

output: {

// 输出路径是 myProject/output/static

path: path.resolve(__dirname, '../output/static'),

publicPath: 'static/',

filename: '[name].[hash].js',

chunkFilename: '[id].[chunkhash].js'

resolve: {

extensions: ['', '.js', '.vue'],

alias: {

'Vue': 'vue/dist/vue.js'

}

module: {

loaders: [

// 使用vue-loader 加载 .vue 结尾的文件

{

test: /\.vue$/,

loader: 'vue'

{

test: /\.js$/,

loader: 'babel?presets=es2015',

exclude: /node_modules/

}

] },

Favlist: {

loaders: {

js: 'babel'

}

plugins: [

new HtmlWebpackPlugin({

filename: '../index.html',

template: path.resolve(__dirname, '../app/index/index.html'),

inject: true

})

] }

7.运行构建命令：

'webpack –display-modules –display-chunks –config build/webpack.config.js'

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38519387

粉丝: 3
资源: 931

Vue2.0+Webpack构建流程详解：从初始化到项目搭建

Vue 2.0 + vueRouter 2.0 + webpack 实例详解：避免新手坑

Vue.js项目结构解析：vue2.0+vue-cli+webpack

Vue2.0+Vuex+LocalStorage：实现本地记事本示例与详细教程

Vue2.0使用过程常见的一些问题总结学习

Vue.js2.0+ElementUI后台系统开发教程：环境搭建与目录构建

手写Vue2.0数据劫持实现解析

Vue2.0至Vue3.0教程：从基础到深入解析

基于Vue 2.0的移动端组件库boycotUI使用指南

Vue2.0与ECharts结合的图表组件封装教程

【JavaScript源代码】手写Vue2.0 数据劫持的示例.docx

最新资源