摘要：或许有人会觉得现在项目里面还没有目录和文件，程序无法顺利输出。实际上，属性中定义的路径如果没有的话，会自动创建的打开文件添加一句有使用过脚手架的都知道这句话，这里添加的这个指令，就是我们在终端输入之后帮我们干的一些事情。
我们先来用 npm init 来初始化项目
因为我们用到了vue以及webpack，所以我们需要将这两个依赖包安装一下，除了这些呢，还有段落标题中的vue-loader，这个就是为了用webpack加载.vue文件，并将它编译成浏览器能认识的js文件
安装vue-loader的同时需要再安装
然后新建一个src文件夹 用来存放源文件，再新建app.vue模板文件
app.vue代码
如何让浏览器识别vue文件呢？那就需要webpack了
配置webpack我们工程总得有个入口文件，让浏览器去访问，让webpack去打包并输出。现在就来配置webpack的入口和出口。
在src目录下新建一个main.js的文件作文工程的入口文件。
代码内容：
配置完入口后就要配置出口了。我们新建一个webpack.config.js，在里面里配上entry入口和out出口，表示webpack文件会将将entry路径下的文件，打包到out的路径
以上就是做了这样一件事，将src下的main.js文件以js的形式打包到dist目录下的bundle.js中去。或许有人会觉得现在项目里面还没有dist目录和bundle.js文件，程序无法顺利输出。实际上，out属性中定义的路径如果没有的话，webpack会自动创建的
打开package.json文件添加一句:
webpack --config webpack.config.js
有使用过脚手架的都知道npm run build 这句话，这里添加的这个指令，就是我们在终端输入npm run build之后webpack帮我们干的一些事情。而webpack --config webpack.config.js这句的意思就是webpack去帮我们执行我们新建的webpack.config.js文件
现在先试一下执行npm run build，然后接着输入yes就好了
安装后我们再npm run build一次，就会出现已报错
这个错误是告诉我们，需要为app.vue这个文件声明一个loader，因为webpack只支持js类型的文件，像这种vue文件是不支持的，所以我们要使用一些工具，来帮助它认识超出它理解范畴的语法。这个时候就需要Module了
Module在webpack.config.js里添加module配置项
好添加完成之后，再次执行 npm run build 指令。
好的又报错了，这是要我们安装vue-template-compiler依赖
输入指令npm i vue-template-compiler
同时我们还要安装依赖style-loader来解析css
npm i style-loader
webpack并没有处理css的能力，所以我们还需要在moudle添加rules配置项，如下
配置后我们再次执行 npm run build 指令。这一次终于成功了
webpack配置项目加载各种静态资源及css预处理器 1. 静态资源在上面，我们接触了css样式加载
接下来我们要配置加载图片了。我们加载图片用到的loader叫‘url-loader’,它的作用是将我们的图片转换成一个base64的字串存放于我们打包生成的js里面，而不是重新生成一个文件。对于一些小的文件，几kb的文件可以帮助我们减少过多的http请求。那么url-loader其实封装了我们的file-loader，file-loader其实是将文件进行处理后换个名字存放于另一个地方。那么我们先看下配置：
我们这里同样使用的use属性，不同的是数组里面使用的对象，因为我们对图片还需要进行一些更细化的配置，像图片的大小(limit)，文件名称(name)有时都是需要进行配置的，所以这里使用了对象。当然，我们需要把使用到的loader安装一下。
npm i url-loader file-loader
接下来我们新建一个assets目录，然后放几张图片进去，并同时新建一个css目录新建一个test样式
css代码：
并且将我们项目的入口文件添加几行代码：
我们现在执行一下npm run build 指令，可以看到webpack将图片打包成base64字串存放于js中，并且重新生成了新的文件
打开bundle.js
图片被编译成了base64字串
在这里我们用stylus处理器，安装命令。注意记得安装stylus-loader
npm i stylus-loader stylus
新建一个stylus文件
然后将这个styl文件在入口文件中引用进来
接着我们就可以编译一下，继续执行npm run build 指令编译
我们之前写的font-size成功编译在bundle.js里面了
webpack配置webpack-dev-server这个包是咱们在开发环境用的包处理工具，我们这里先install这个包。
npm i webpack-dev-server
然后再package.json配置
"dev": "webpack-dev-server --config webpack.config.js"
添加完dev指令后需要到webpack.config.js下修改一部分内容来专门适应我们的开发环境。接下来我们需要区分全局的一个环境，很容易就想到需设置一个全局的环境变量来做区分控制，我们在build指令后面添加代码
注：我们如果不想区分不同系统，写一套代码来适应多个系统，需要安装cross-env模块，并使用他
这里完成之后我们就可以在webpack.config.js文件里面进行判断了。
webpack.config.js文件里面进行判断了
overlay属性是在我们编译的过程中能够让任何的错误都显示到网页上面。最后我们加完了这些基础的配置之后回过头来发现，我们好像配置的只是js、css、img文件，没有html页面去容纳它们。这个时候我们用到一个webpack的一个插件html-webpack-plugin,我们照样来安装一下它：npm i html-webpack-plugin
这里我们用到了webpack，所以需要将 webpack 这个变量引用进来。
到这里我们基本的配置就完成了，最后需要了解一下webpack.DefinePlugin，我们在代码中的plugin里添加：
说到这里，理论上我们已经完成的本地开发环境的编译
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104008.html
摘要：后来经过排查你会发现是由于目前还没有版本。可以使用该方式解决。这就是我为什么不推荐你使用创建脚手架的原因此文的受众是想要进阶中级的初级前端人员。 最近在知乎看到一个问题，原问题如下： 很奇怪，为什么现在能找到自己手动创建vue脚手架的文章非常少，而且大家似乎对webpack4的热情并不高，对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜。难道现在一般的做...
摘要：查看安装是否正常回车后看到输出当前安装的版本号，例如，即安装正常通过以上步聚，说明已经安装完并能正常运行。再次用脚手架搭建项目第二步将模块安装完成后，就可以使用以下命令创建项目了。 前言 世间万难 无非一拖二懒三不读书 对 说的就是我 突然觉得这句话说的很对，自从上次写完nodejs安装及npm全局模块路径的设置已经过去两月有余，而我的vue框架学习也就止步于此。还是没有给自己施加压力...
摘要：那该怎么管理这两个不同的项目呢解决子模块用的的同学肯定一下子就想到子模块的知识了。最后，也希望有想法的同学还有大佬多多留言，给点建议原文地址从零开始做前端架构脚手架参考资料官方文档使用定制前端脚手架别人写的脚手架文件操作相关文档子模块 前言 相信很多人都用过vue-cli或create-react-app或者类似的脚手架。脚手架方便我们复制，粘贴，或者clone代码库，而且还可以更具用...
摘要：提前申明注意自己对脚手架的理解和认识，很多东西和理解都是形象上的手法，并不专业和官方一种项目构建工具，可以将和压缩成一个文件。之后使用项目名进入项目根目录，使用来自动安装项目依赖。 提前申明 注意：自己对vue脚手架的理解和认识，很多东西和理解都是形象上的手法，并不专业和官方 webpack 一种项目构建工具，可以将css和js压缩成一个文件。此外，可以提供测试用服务器。使用webpa...
摘要：下面来就来讲讲脚手架的安装吧。如何安装安装只需要在终端下输入下面一条命令自带不需要安装安装完成后使用即可。原因是的问题，要求版本是。想用安装，就必须用安装一下。 前言 Vue作为前端三大框架（Angular，React，Vue）之一，号称是最简单，最容易上手的框架，同时也是行内的大趋势，还可以用来开发最火的小程序。具有开发快，双向数据流等特点，有些人认为Vue是Angular和Reac...
摘要：下面来就来讲讲脚手架的安装吧。如何安装安装只需要在终端下输入下面一条命令自带不需要安装安装完成后使用即可。原因是的问题，要求版本是。想用安装，就必须用安装一下。 前言 Vue作为前端三大框架（Angular，React，Vue）之一，号称是最简单，最容易上手的框架，同时也是行内的大趋势，还可以用来开发最火的小程序。具有开发快，双向数据流等特点，有些人认为Vue是Angular和Reac...
阅读 3027·2023-04-26 00:40
阅读 2351·2021-09-27 13:47
阅读 4095·2021-09-07 10:22
阅读 2935·2021-09-06 15:02
阅读 3270·2021-09-04 16:45
阅读 2419·2021-08-11 10:23
阅读 3568·2021-07-26 23:38
阅读 2873·2019-08-30 15:54
