一. 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

可以自动打开浏览器

Vue—07—模块化高级之webpack；