webpack的基础知识

webpack是前端一个项目构建工具，它是基于Node.js开发出来的一个前端工具。

一、webpack的作用：

1.能够处理JS文件的相互依赖关系；
2.能够处理JS的兼容问题，把高级的浏览器不识别的语法，转为低级的，浏览器能正常识别的语法。

webpack.config.js 配置文件

1
2
3
4
5
6
7
8
const path = require('path')
module.exports = {
    entry: path.join(_dirname, './src/main.js'), //入口，要打包的文件
    output: { //输出文件
        path: path.join(_dirname, '/.dist'), //输出的目录
        filename: 'bundle.js' //指定输出文件的名称
    }
}

二、当在控制台，直接输入webpack命令时，webpack做出了以下几步：

1. 首先，webpack发现，我们并没有通过命令的形式给它指定入口和出口；
2. webpack就会去项目的根目录中，查找一个叫做webpack.config.js的配置文件；
3. 当找到配置文件后，webpack就会去解析，当解析完配置文件后，就得到了配置文件的中导出的配置对象；
4. 当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建。

三、使用webpack-dev-server实现自动打包编译功能

1. 运行npm install webpack-dev-server -D把这个工具安装到项目的本地开发依赖；
2. 这个工具的用法和webpack用法一样；
3. 由于我们本地安装webpack-dev-server，所以无法把它当作脚本命令在终端运行；（只有那些安装到全局-g的工具才能在终端中运行）
4. 如果要正常运行这个工具，要求在本地中，必须安装webpack；
5. 这个工具帮我们打包生成bundle.js文件并没有放到实际的物理磁盘上；而是直接托管到了电脑的内存中，所以，在项目根目录中找不到打包好的bundle.js。

四、html-webpack-plugin

当使用html-webpack-plugin之后，我们不再需要手动处理bundle.js的引用路径了，因为这个插件，已经帮助我们自动创建一个合适的script，并且，引用了正确路径。

两个作用：

1. 自动在内存中根据指定页面生成一个内存的页面；
2. 自动把打包好的bundle.js追加到页面中去。

五、loader

PS：webpack默认只能打包处理JS类型的文件，无法处理其他非JS类型文件
例如：import ‘./css/index.css’ 会报错

因此要如果要处理非JS类型文件，我们需要手动安装一些合适的第三方loader加载器

1. 需要装两个第三方loader：cnpm i style-loader css-loader -D；
2. 打开webpack.config.js这个配置文件，在里面新增一个配置节点，叫做module，它是一个对象；在这个module对象身上，有个rules属性，这个rules是个数组；在这个数组中存放了所有第三方文件的匹配和处理规则；

   1
   2
   3
   4
   5
   6
   7
   8
   //eg:
   module:{
    rules:[
        {
            test:/\.css$/,use:['style-loader','css-loader']
        }
    ] //配置处理.css文件的第三方loader规则
   }
   

PS:webpack处理第三方文件类型过程：

1. 发现要处理的文件不是JS类型文件，然后就去配置文件中，查找有没有对应的第三方loader规则；
2. 如果找到对应的规则，就会调用对应的loader来处理这些文件类型；
3. 在调用loader时，是从后往前调用的；
4. 当最后一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到bundle.js中去

url-loader

默认情况下，webpack无法处理css文件中的url地址。需要：
安装url-loader:cnpm i url-loader file-loader; 然后在配置文件上配置。

六、babel

在webpack中默认只能处理一部分ES6的新语法，一些更高级或ES7语法处理不了；这是需要借助第三方babel来帮助webpack来处理这些高级语法，当第三方babel把高级语法转为低级语法之后，会把结果交给webpack去打包到bundle.js中

1. 在webpack中，运行两套命令，安装两套包，去安装babel相关的loader功能；

   第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
   第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D

2. 打开webpack的配置文件webpack.config.js，在module节点下的rules数组中，添加一个新的匹配规则： {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}

   PS：必须把node_modules目录通过exclude选项排除掉

3. 在项目的根目录中，新建一个叫.babelrc的babel配置文件，这个配置文件，属于JSON格式，所以，在写配置时必须符合JSON语法规范；

   1
   2
   3
   4
   5
   //配置如下：
   {
    "presets": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
   }
   

七、使用vue实例的render方法渲染组件

1
2
3
4
5
6
//eg:
render: function(createElements){
    //这里createElements是一个方法，调用它，能够把指定的组件模板渲染为html结构
    return createElements(login)
    //注意：这里return的结果，会替换页面中el指定的那个容器（也就是<div id="#app"></div>）
}

PS：在webpack中，如果想要通过vue，把一个组件放到页面中显示，vm实例中的render可以实现

八、webpack中如何使用vue：

1. 安装vue的包：cnpm i vue -S；
2. 由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以需要安装能解析这种文件的loader：cnpm i vue-loader vue-template-compiler -D，然后在配置文件webpack.config.js中，新建loader配置项：{test:/\.vue$/, use: 'vue-loader'}；
3. 在main.js中，导入vue模块import Vue from 'vue'；
4. 定义一个.vue结尾的组件；
5. 在main.js中使用import login from './login.vue'导入这个组件；
6. 创建vm实例var vm = new Vue({el:'#app", render: c => c(login)})；
7. 在页面中创建id为app的容器。

PS:使用import Vue from 'vue'导入的Vue构造函数，功能不完整，只提供了runtime-only的方式，并没有提供先网页中那样的使用方式。

解决方法：在webpack.config.js配置文件上，加上如下配置：

1
2
3
4
5
resolve:{
    alias: {//修改vue被导入时包的路径
        "vue$': "vue/dist/vue.js"
    }
}

九、结合webpack使用vue-router

1. 导入vue-router包：import VueRouter from 'vue-router'
2. 手动安装VueRouter：Vue.use(VueRouter)
3. 创建路由对象

   1
   2
   3
   var router = new VueRouter({
    routes:[......]
   })
   

4. 将路由对象挂载到vm实例上

十、export default 和 export使用方法

export default

1. 向外暴露成员，可以用任意变量接收

   eg：var info = {name: "Mike"}; export default info;
   接收：import aaa(任意名) from './...'

2. 在一个模块中，export default只允许向外暴露一次
3. 在一个模块中，可以同时使用export default和export

export

1. 使用export向外暴露成员，只能使用{ }的形式接收，这种形式叫做[按需导出]；

   eg：export var name = 'Mike' 接收：import {name} from './...'

2. export可以向外暴露多个成员，（也就是说可以使用多次）；
3. export导出成员时，必须用导出时的名称，来使用{ }按需接收；
4. 如果想换个名称接收，可以使用as来起别名；

   eg:import {name as changeName} from './...'

• Next
  MarkDown的基本语法