【22】手动配置webpack项目

手动配置webpack需要的环境有node环境，node环境搭建可以参考如下地址：【Node安装】

第一步，创建自己的项目文件目录，这里我就直接在E:下创建youxin文件夹，然后新建一些必须的文件，
|— index.html —–> 【首页】
|— main.js —–> 【webpack入口文件】
|— Demo.vue —> 【编写vue代码一个案例】
|— webpack.config.js —> 【webpack配置文件】

如下图所示：

index.html代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="app"><app></app></div><!-- 因为下面的webpack.config.js文件中output会配置项目输出js文件为当前目录下的build.js，所以引用方式写成这样 --><script src="build.js"></script></body>
</html>

webpack.config.js代码如下

module.exports={entry:'./main.js',output:{path:__dirname,filename:'build.js'},module:{loaders:[{test:/\.vue$/, loader:'vue'},{test:/\.js$/, loader:'babel', exclude:/node_modules/}]},babel:{presets:['es2015'],plugins:['transform-runtime']}
};

最后初始化webpack项目，并生成package.json文件，该文件是整个项目依赖以及相关配置信息总览的文件，我们只需在当前文件目录下按住【shift】 + 【鼠标右键】然后点击选择【在此处打开命令窗口】。

然后录入【npm init】，在提示配置相关配置时，我们只需要一路回车就行了，最后录入yes就可以。

这时我们回头看下项目目录会多出一个package.json文件，文件内容如下

{"name": "youxin","version": "1.0.0","description": "","main": "main.js","scripts": {"dev": "webpack-dev-server --inline --hot --port 8083"},"author": "","license": "ISC"
}

这时我们需要借助npm来引入相关的依赖插件，插件依赖引入如下：

npm install webpack@1.13.3 --save-dev
npm install webpack-dev-server@1.16.2 --save-dev让`*.vue`文件变成正常代码
npm install vue-loader@8.5.4 --save-dev
npm install vue-html-loader@1.2.3 --save-dev
npm install css-loader@0.25.0 --save-dev
npm install vue-style-loader@1.0.0 --save-dev
npm install vue-hot-reload-api@1.3.2 --save-dev解析ES6相关代码
npm install babel-loader@6.2.5 --save-dev
npm install babel-core@6.17.0 --save-dev
npm install babel-plugin-transform-runtime@6.15.0 --save-dev
npm install babel-preset-es2015@6.16.0 --save-dev
npm install babel-runtime@6.11.6 --save-dev引入vue.js文件，这里引入1.0版本的
npm install vue@1.0.28 --save

最后在main.js写下代码如下：

import Vue from 'vue'
import Demo from './Demo.vue'
new Vue({el: '#app',components:{app:Demo}
});

Demo.vue

<template><div id="app"><h1>Vue+Webpack手动配置成功</h1></div>
</template>

最后我们访问下localhost:8083，访问效果如下：

【22】手动配置webpack项目相关推荐

Visual Studio IDE环境下利用模板创建和手动配置CUDA项目教程
目前版本的cuda是很方便的,它的一个安装里面包括了Toolkit`SDK`document`Nsight等等,而不用你自己去挨个安装,这样也避免了版本的不同步问题. 1 cuda5.5的下载地址,官 ...
vscode中安装webpack_VSCode下手动构建webpack项目(示例代码)
1.执行npm install nrm -g,安装nrm,此模块主要用于切换npm镜像源,简化手动配置步骤 2.执行 nrm ls,可以看到npm源地址列表,当前使用的是默认源,npm https:/ ...
git 创建webpack项目_近期总结：手动搭建react项目，将项目从自己的库引入到新的项目中使用...
背景:最近公司有这样一个需求,需要开发一个react工具类,这个工具类可以用在其他项目里使用,并且这个工具类比较大,需要多人协作开发. 这个项目主要由同事负责,于是同事就将这个工具类当成一个单独的 ...
webpack手动配置以及自动配置
本次文章主要是为了自己以后复习用的,如果能够帮到你就更好. 首先我们需要了解前端工程化概念:以模块化.组件化.规范化.自动化为基础,进行前端项目开发的方式. 1.模块化:js的模块化,css的模块化 ...
webpack配置vue3项目
用webpack搭建Vue3项目一.项目需要的基本依赖 1.vue的依赖 2.ui组件库依赖 3.AJAX请求库依赖(axios) 二.几个loader和webpack配置 1.引入库 2.目录结构 ...
SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）
SkeyeWebPlayer.js H5播放器开发之播放器动态渲染video. 动态渲染是采用js进行创建dom.添加dom.添加class.style等方式操作dom元素.最终将播放器编译成成一个独 ...
webpack项目配置与启动流程
创建项目 npm init //然后依次填写相应信息 {"name": "test","version": "1.0.0" ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
webpack 的基本使用—— 创建列表隔行变色项目||在项目中安装和配置 webpack
创建列表隔行变色项目 ① 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json ② 新建 src 源代码目录 ③ 新建 src -> index ...

【22】手动配置webpack项目

【22】手动配置webpack项目相关推荐

最新文章

热门文章