Vue—07—模块化高级之webpack；
一. webpack基本使用
webpack是一个前端模块化打包工具;
我们在node环境中, 安装了webpack包之后, 只需要新建一个main.js文件, 然后在这个文件和其他文件可以使用任何模块化规范(commonjs\amd\cmd\ed6都行)开发, 最后打包的时候只需要打包这个main.js文件, 其他js文件webpack会自动帮助我们打包的, 代码如下:
webpack ./src/main.js ./dist/buddle.js
然后在index.html中引入./dist/buddle.js即可;
二. webpack自定义快捷键
1. webpack
刚刚我们使用webpack ./src/main.js ./dist/buddle.js命令很麻烦啊, 能不能简单点, 可以, 就是自定义一个和src同级的webpack.config.js文件, 在这个文件里定义每次打包的入口文件和出口文件, 如图:
其中, output的path属性需要绝对路径, 所以, 需要使用导入node环境自带的path模块, 然后使用__dirname变量取得绝对路径;
如此, 便可以直接在终端中使用webpack命令打包了;
2. npm run build
还可以在packgae.json的scripts属性中定义build脚本, 这样,我们只要使用npm run build命令, node便会自动去找build脚本的内容并执行;
三' lorder
webpack如何处理除了js问价外的一些特殊文件呢?比如说css文件或者jpg文件?
1.处理css文件
先使用npm安装两个依赖
npm install --save-dev css-loader
npm install --save-dev style-loader
然后在webpack.config.js文件中配置,
2.加载less文件
3.加载图片文件
使用url-lorder
如果图片的大小超过了limit的限制13000kb, 所以可以要再安装一个file-lorder模块;
然后图片打包后它的路径是不对的, 需要配置一下, 我们可以在webpack.config.js中配置;
打包后的图片名称长度太长了, 可以通过在webpack.config.js文件配置name属性来设置;
4.es6语法转化为es5语法
四、 webpack结合vue使用
1.如何结合？
我们的开发肯定既要使用打包工具webpack, 又要使用vue框架开发; 那么如何结合起来?
很简单, 首先我们得node环境使用npm install 的方式安装webpack和vue;
然后再main.js中使用import {Vue} from 'vue';即可自动导入vue对象;
然后配置webpack.config.js的resolve属性的alias属性即可,
最后打包，打包即可运行index.html;
2.如何使用.vue文件写子组件模板？
第一:在root组件写div标签
我们不要再在index.html文件中写root组建的模板了, 这样不利index.html的维护;
所以我们会在root组件的template属性里写div标签;
如果root组件中既有template又有el, template会把el管理的dom节点给替换掉;
把toot组件的templte属性, 当作上el属性管理的div标签, 毕竟后期会把它替换掉;
第二:在子组件写div标签
如果我们在main.js中写一个vue实例, 并且自己写template会导致vue实例非常长, 代码复杂;
那怎么解决?
我们再vue实例中注册一个子组件app, 就像以前学的子组件一样, 在子组件app中写template模板;
然后再template属性中引用这个<app/>标签, 就像以前在父组件模板中引入<cpn></con>标签一样;
第三:在app.vue文件中写div标签
刚刚在子组件中写, 确实vue实例的代码不复杂了, 但是有一点, 我们在子组件的template属性写<div>标签太麻烦了, 即使有飘键也很麻烦, 也没有自动补全功能等, 那如何解决?
我们新建一个.vue文件, 在.vue文件的<template>标签中直接写子组件模板中的div标签, 在.vue文件的<script>标签中直接写子组件的其他属性,并export default;
第四，打包，打包的时候需要专门的lorder去处理。vue文件；
五、webpack结合plugin
1.添加版权的插件使用
2.打包html的插件
3.压缩js的插件
4.搭建本地服务器的插件
第一个细节，
script优先找本地的脚本，所以我们不用在script中写上完整的相对路径名，只需要写web-devserver即可；
第二个：npm run dev --open
可以自动打开浏览器
5.配置文件webpack.config.js的分离
