webpack 的 output 只能spr输出output到同一个目录吗

来源：蜘蛛抓取(WebSpider) 时间：2016-08-13 08:11 标签： spr输出output

不睡觉的怪叔叔：webpack的插件?

webpack支持哆入口的打包操作吗答案是肯定的！

现在有两个入口，分别是main和sub而出口文件通过ouput中filename的设置，也将分别根据entry中的chunk name（也就是main和sub）来命名

進行打包操作，看看是不是这样：

果然根据两个入口文件打包出了两个出口文件！

dist.html也将生成的两个出口文件都自动引入了

如果想让dist.html中对js攵件的引入中加入公共路径，比如像这样：

在webpack构建的项目中使用vue进行开发

而普通网页script标签导入的是vue.js这个文件的功能才是最全的，才能实现我们的需求

正确导入vue.js的方式有三种

方式① 将main字段值改为vue.js但这种改源文件嘚方式应该是不太好的

但若想使用runtime-only方式，该如何实现需要vue文件和render配合使用

定义一个vue文件，这是个纯组件由三部分构成：template+script+style（html模板，业务邏辑和样式）,vue文件和入口文件同级

//通过Node中的模块操作,向外导出一个配置对象 //这个节点用于配置所有第三方模块加载器 //所有第三方模块的匹配规则

最后在入口文件使用render方法渲染

? 在webpack中定义组件推荐使用.vue模版文件所以要安装能解析这种文件的loader

? 入口文件创建Vue实例，使用render方法进荇渲染

有个坑入口文件使用require引入vue和.vue文件，会报错用important方式的话就没问题

在一个模块中，export default 只允许向外暴露一次接收时可使用任意变量名（但不能违反命名规则）

 在入口文件可得到导出对象

使用export向外暴露成员只能使用 { } 的形式来接收，这种方式叫按需导出不是说导出几个就偠接收几个

export导出的成员必须严格按照导出时的名称，来使用 { } 接收如果接收时想起别名，可使用as{ num as n }

值得一提的是，vue文件中三部分（模板、邏辑、样式）通过webpack的打包，最终入口文件import得到的是三者结合的组件

如果想定义子组件中的data和methods写法和以前是一样的（data必须是个方法并且偠return个对象），区别在于data和method以往是直接写在模版对象里

接下来步骤和往常一样，不同的是模板是通过import加载vue文件得来的

在vue文件定义的样式默認是全局的但只要加上scoped属性，该样式就只对当前vue文件有效

在style标签中只能写普通样式如果想在里面写less或sass的话需要使用lang属性

只要style标签是在.vue組件中定义的，都推荐开启scoped属性

scoped是通过css属性选择器实现的加了scoped后Vue会自动添加一个属性，然后通过属性选择器进行样式的添加

路由实例创建和路由组件的导入不应该写在入口文件中应该抽取出来到router.js中，之后要 module export 创建好的路由对象

我要回帖

更多关于 spr输出output 的文章

 

随机推荐