Webpack

路恒
413 阅读3分钟

本笔记是看b站codewhy老师的视频做的笔记，大家可以一起学习，个人觉得他讲课很好，不光可以听到新知识，还可以复习旧知识，简直美滋滋。视频地址是

www.bilibili.com/video/av595…

认识webpack

现代js应用的静态模块打包工具

支持模块化，可以把模块化方案变成大部分浏览器支持的

和grunt/gulp的对比

gulp更强调的是任务，webpack更强调的是模块化。

webpack的安装

  • 依赖nodejs环境。
  • npm（node packages manager）包管理工具
  • npm install webpack@3.6.0 -g

打包的最基本使用，

webpack ./scr/需要被打包的 ./dist/打包之后的 这个一般只打包main.js就行，webpack会自动帮你把各种依赖搞定，引用的其他文件也打包好。

webpack.config.js和package.js

例如控制台直接输入webpack就自动把scr的main.js打包到dist里边。

npm init初始化项目， npm install安装依赖

webpack和npm run的映射

在package.json中写上就行啦

  • 在终端敲命令执行的是全局的包。
  • 用npm映射优先执行本地的

webpack的loader

loder是为了把jsx .vue sass等文件装换为es5，让大部分浏览器识别。

  1. 通过npm安装需要的loader
  2. 在webpack.config.js中的module关键字下进行配置
  • 使用多个loader时是从右向左读取

webpack和图片的配合

  • 在option中设置limit的时候，当图片小于这个大小，则会使用base64字符串的形式
  • 当加载的图片大于limit的值得时候，会使用file-loder

webpack es6转换为es5

用bable这个loader

  • env environment环境
  • exclude 排除

如何在webpack中配置vue

直接写好vue然后运行的时候他会报错，因为默认是runtime-only模式，我们需要给他改成编译的版本。 runtime-only无法加载模板。(默认的new Vue也算模板，就算我们没有写template也算有模板。)

修改方法： webpack.config.js中增加

 resolve:{
    // 别名
    // 指定对应的版本
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    }
  }
el和template区别

同时有el个template的话，template中的内容会把el给替换掉。

vue-loader新版本再使用的时候会报错。可以安装旧版本

处理.vue文件

需要安装vue-loader和vue-template-compier

plugin

插件，对现有的框架进行扩展 使用步骤：

  1. npm安装
  2. webpack.config.js中配置

添加版权的plugin

BannerPlugin，这是webpack自带的插件， 在webpack.config.js写

const path = requre('path')
const webpack = require('webpack')

module.exports = {
    plugins:[
    new webpack.BannerPlugin('最终版权归xioalu所有')
    ]
}

重新打包即可。

打包html的plugin

  1. 安装 npm install html-webpack-plugin --save-dev
  2. 引入
  3. 在plugins中写个newHtmlWebpackPlugin()

注意

  • 路径要选对
  • 写好之后要写把配置文件中之前配置的路径删除。

js压缩的plugin（丑化）

  1. 安装uglifyjs-webpack-pligin@1.1.1
  2. 使用

webpack-dev-server搭建本地服务器

  • 这是基于nodejs搭建的，用的express框架 搭建方式：
  1. npm install webpack-dev-server@2.9.3
  2. 配置devServer（和plugins同级）
    1. constentBase 指定的目录
    2. inLine 是否实时监听
  3. 使用：
    1. 不能直接写webpack-dev-server，因为这个是从全局找，会报错。
    2. packfes.json中配置dev项
    3. npm run dev --open（自动打开）

webpack配置文件开发和发布分离

  1. 所有开发中的配置放在build文件夹中
  2. 将之前的一个配置文件分成3个文件。
  3. base文件写公共部分，dev文件写开发时用的，pord写发布时候用的。
  4. 在开发和发布中把base文件拼接上
  5. 在package.json中修改读取的配置文件的位置
avatar
文章
阅读
粉丝