webpack入坑之旅加载vue单文件组件
Posted ghyes
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack入坑之旅加载vue单文件组件相关的知识,希望对你有一定的参考价值。
需要什么?
在经过前面的四个练习,相信已经对于webapck
有了一定的了解,现在我们就来一个综合案例,进一步加深对于webpack
的理解。
首先我们应该思考要解析.vue
类型的文件,需要什么样的东西?应该按照什么样的步骤来?我们应该怎么去搭建这个项目?
开始
第一步:初始化项目目录
我们需要创建如下目录及文件夹,最终目录结构如下:
1
|
- dist //文件生成目录
|
第二步:安装项目依赖
如果你上面没有创建package.json
文件的话,可以直接使用npm init
来初始化我们的package.json
文件的配置。
想要去编译其他的文件比如react
,coffce
等等,就必须要加载很多对应的loader
。要想加载一个.vue
文件。当然也是同样的道理。
建议用npm install xxx-loader --save-dev
这样的命令一条一条的敲。在命令行中,会有提示,可以帮助理解webpack
的中的依赖管理关系。我的配置清单如下:
在实际项目中,json文件中不能出现注释,在这里为了方便大家了解里面设置项的含义,就直接使用注释的方式加载后面了。
1
|
{
|
如果你想省事的话,直接复制上面的devDependencies
,dependencies
字段,并且填写到你的package.json
文件中。然后运行npm install
就会自动安装所有的模块以及依赖。
第三步:配置webpack
文件已经设置好了,接下来就到了我们关键的一步,配置webpack.config.js
,清单如下:
1
|
const path = require(‘path‘)
|
请详细查看这里面的设置,我这里都是很简单的配置,在你的项目中,还可以更进一步的对于入口文件和输出文件进行更加深入的定制。
并且在这里生成的css文件还会插到js中,有时我们需要更进一步的把它独立出来,然后在html中引入这时就会用到webpack
的插件,在这里先不说(因为我暂时没用到,没有试验过,好像也不麻烦,可以的话下篇再试试)
第四步:编写代码
接下来就是我们要展示的文件的编写了,我直接把代码贴上来了。
index.html:
1
|
|
这里是main.js的内容:
1
|
//es6语法:
|
这里是app.vue:
1
|
<template>
|
第五步:修改自动刷新设置
下面再单独的再谈一下关于自动刷新的实现,首先需要说明,在上一篇博客中的自动刷新实现,是有问题的。只能改变css样式,使颜色进行变化。对于html里面的内容改变时,浏览器并不会自动刷新。
注意点一:
首先我们看到package.json
中scripts
字段中的"start": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
。 这里开启了 热加载 以及自动打开浏览器。
注意点二:
在webpack.cofig.js
中还有其余对于devServer
进行一些配置,如下:
1
|
devServer: {
|
这样安装设置完成之后,就有了自动局部更新了!!
结束
步骤都走完了,因为在上面的package.json
中已经进行了scripts
项的配置。运行npm start
,打开localhost:8080
可以看到设置的背景色已经出来了,去改变一下背景颜色?data?template?
看看浏览器会不会自动刷新?
添加
开发环境可以了,但是生产环境呢?在 webpack.config.js
我们再来增加一些配置
1
|
if (process.env.NODE_ENV === ‘production‘) {
|
然后再加一个 npm script 。 "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
运行 npm run build
我们就可以将我们刚刚开发的内容进行压缩打包了。
如果你按照我的步骤,并且,npm包安装没有错误的话,应该就能成功了。
不行的话,请再仔细对照去看看有什么地方没有编写对吧!
以上是关于webpack入坑之旅加载vue单文件组件的主要内容,如果未能解决你的问题,请参考以下文章