webpack的基本使用及配置

前言:

拿到一个项目 , 生成默认package.json，可以执行npm init -y
package.json中dependencies和devDependencies的部分都会被安装，区别在于前者用于生产环境，后者用于开发环境
-g 表示全局安装，通常用于安装脚手架等工具
-save(-S) 表示本地安装，会被加至dependencies部分 eg: npm i jquery -S 安装jquery包
-save-dev(-D) 表示本地安装，会被加至devDependencies部分 eg: cnpm i webpack-dev-server -D (实现自动打包编译)
什么都不加也会安装，但是不会加至package.json中

开始:

拿到一个项目之后:::

• 第一步:
  
  

  package-json.png

新建文件夹, 用 npm 的包管理工具 管理起来 ( 命令行输入 npm init -y ) 文件里出现 package.json
如果文件名有 中文 , 命令行输入 npm init 不需要 -y 回车 会重新让写一个名字

• 第二步:
  创建两个 文件夹 src ( 存放项目源代码的 ) 和 dist ( 项目打包之后输出的文件放到dist里边 )
  1. 在src 里 新建 index.html 项目首页
  2. 然后 在src 里 建一个 main.js , 这是项目的 JS 入口文件
  在 main.js 先console.log 一句话 接下来我们要 尝试着 把main.js 打包一下 然后 引入到 index.html 里面 ,看我们这个 能不能正常 打包 ( 命令行输入 webpack ./src/main.js ./dist/bundle.js ) → dist文件夹 有了 bundle.js
  3. 如果 我们把 dist文件夹 删掉 命令行运行 webpack ./src/main.js ./dist/bundle.js 也会自动生成 dist文件夹
  4. 在 index.html 用 script标签 引入 ../dist/bundle.js 运行浏览器右键查看 console.log出了 你好

  每次修改了一些代码 都需要手动重新运行  webpack ./src/main.js ./dist/bundle.js,体验不好
        我们想要  自动打包  怎么办呢?
  

  • 第一步:
    安装工具 , ( 命令行 输入 cnpm i [email protected] -D ) 实现自动打包编译的 功能
  • 第二步:
    装完之后 , 需要在 项目根目录新建一个 webpack的 配置文件 叫 : webpack.config.js ( 装完之后, 命令行 提示 dev-server 依赖于 webpack, 需要项目本地 安装webpack )
  • 第三步:
    安装本地 webpack , ( 命令行输入 cnpm i [email protected] -D ) 此处 ,安装了指定webpack版本 , 避免与webpack-dev-server冲突

  写一下 配置文件 在webpack.config.js中

  1. const path = require('path') //由于 webpack是 基于node进行构建的 , 所以, webpack的配置文件中 ,任何 合法的 node 代码 都是支持的
  2. 向外 暴露 一个 配置对象:
     module.exports = { } 当以命令行 形式 运行 webpack 或 webpack-dev-server 的时候, 工具会发现 , 我们并没有提供 要打包的 文件的 入口 和 出口文件 , 此时 ,他会检查项目根目录中的 配置文件 , 并 读取这个文件 , 就拿到了 导出的 这个 配置对象 , 然后 根据这个 对象 , 进行打包 构建
     (1.) 指定入口文件 :entry: path.join(__dirname,'./src/main.js')
     (2.) 通过 output 指定 输出选项 output: { }

    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    }
  

  3. 配置完成后 , 命令行 输入 webpack 打包 , 此时并没有实现 实时打包
  4. 如果 我们要 利用 dev-server 这个 工具 实时打包的话 , 需要在 package.json里 添加一个 脚本 , 在
     scripts: { } 里 再添加一个指令: "dev": "webpack-dev-server"

  • webpack-dev-server的配置参数

webpack-dev-server配置参数.png

     (1.)  自动打开浏览器  --open"  
     (2.)  设置启动时的默认端口  --port 3000
     (3.)  指定托管的 根目录   --contentBase src
     (4.)  启动热更新   --hot

5. 命令行 输入 npm run dev 右键审查 报错 页面里的 bundle.js 路径不对
   第一种: 把页面里的 ../dist/bundle.js 路径 改为 : /bundle.js
   第二种: 注释掉
   用 html-webpack-plugin来实现 他为我们 在内存中生成 一份 一模一样的页面 , 并且会 自动 把 bundle.js 注入到 页面底部 我们不需要再手动 处理 bundle.js 的引用路径
6. 命令行 安装 cnpm i html-webpack-plugin -D
7. 在 配置文件中 , 引入 const htmlWebpackPlugin = require('html-webpack-plugin')
8. 插件引入进来了 , 如果要 配置插件 , 需要在 导出的 对象中, 挂载一个 plugins 节点 , plugins是一个数组, 和output平级 , 配置 一个 plugins:[ ] , 然后 new一下 htmlWebpackPlugin

plugins: [
    new htmlWebpackPlugin({ 
        template: path.join(__dirname,'./src/index.html'), 
        filename: 'index.html'
    })
]

***** 如果 想要 引入 css 样式:

新建 index.css

1. 我们可以在index.html link一下css文件, 但是这样会发起 请求 ; ( 不赞同这种方式 )
2. 我们可以在 main.js 里 , import 一下 eg: import './css/index.css' 保存 会报错, 提示我们 webpack 处理不了这种类型的文件 , 需要我们 安装 loader
3. 安装 处理样式表的 loader : ( 命令行输入 cnpm i style-loader css-loader -D )
4. 然后 我们需要 添加一下 配置节点 module 节点 module: { rules: [ 处理css文件的loader ] }
   { test: /\.css$/, use: ['style-loader', 'css-loader'] } //处理 css文件的 loader

***** 如果 想要 引入 less 文件:

命令行安装 cnpm i less-loader less -D
{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] } //处理 less文件的 loader

***** 如果 想要 引入 scss 文件:

命令行安装 cnpm i sass-loader node-sass -D
{ test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader'] } //处理 scss文件的 loader

若我们 想在 css 里 写一个 背景图片 eg: background: url(../images/cat2.jpg) no-repeat;
保存 报错 , 也就是说 默认情况下 , webpack 无法帮我们处理 css 文件中的 url 地址 不管是 图片 还是 字体库 , 只要是 url 地址 都处理不了

解决办法:

• 第一步:
  安装 url-loader , 同时 url-loader 也需要依赖于 它内部的 file-loader
  ( 命令行 输入 cnpm i url-loader file-loader -D )
• 第二步:
  在配置文件中 ,配置一下 { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' } //处理 图片路径的 loader
• 第三步:
  npm run dev 运行 右键审查 发现 background: url 地址里 自动转成了 base64 格式的 背景图, 这样可以避免多次请求 , 但是 我们有时候, 一些小图可以转成 base64的 , 有些大图 不想让转成 base64格式 怎么办呢???
• 第四步:
  在配置文件中 , 找到 url-loader 加参数 , 和 url地址传参一样 url-loader 有一个固定的 参数 limit , 后边跟的是 图片的 字节数
  eg: { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=19898' }, //处理 图片路径的 loader
  1.) 如果limit 后边给定的值 , 大于图片本身的字节数时, 会把图片进行base64编码
  2.) 如果limit 后边给定的值 , 等于或者小于图片本身的字节数时, 则不会 转为 base64的字符串, 但是 图片路径为 数字和字母组成的 避免重复的名字 , 如果不想改名, 我们传的什么名字的图片, 打包完还要那个名字的 , 怎么办呢?
• 第五步:
  配置文件url-loader 传入第二个参数 name=[name].[ext]
  eg: { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=19898&name=[name].[ext]' }, //处理 图片路径的 loader
  [name]是指: 之前是什么名儿, 还是什么名 [ext] 打包前是什么后缀名, 还是什么后缀名
  • 如果src 里 建立两个文件夹: images images2 里边各有一张 图片名 cat.jpg 的 图片 此时, 浏览器里 两个div的背景图 会显示同一张cat.jpg的图片 因为他们的名字一样 为避免这种情况 我们可以在 [name] 前再加一个 参数 哈希值
    eg: { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=19898&name=[hash:8]-[name].[ext]' }, //处理 图片路径的 loader
    [hash:8] 表示 要截取哈希的前8位放到图片名字前, 哈希值最大可以设置32位

***** 针对处理一些更高级的 ES6与ES7语法:

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

解决方法:

通过Babel , 可以 帮我们 将 高级的 语法转为 低级的 语法

• 1. 在 webpack 中 , 可以运行 如下的 两套命令 , 安装 两套包 , 去 安装 Babel 相关的 loader功能
  • 1.1 第一套包: cnpm i babel-core [email protected] babel-plugin-transform-runtime -D ;
  • 1.2 第二套包: cnpm i babel-preset-env babel-preset-stage-0 -D ;
• 2. 打开 webpack 的 配置文件, 在 module 节点下的 rules 数组中 , 添加 一个 新的 匹配规则

  • 2.1 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

  • 2.2 注意: 在配置 babel 的 loader 规则的时候 , 必须把 node_modules 目录, 通过 exclude 选项 排除掉
    原因有 :

    • 2.2.1 如果 不排除 node_modules , 则 babel 会把 node_modules 中 所有的 第三方 JS 文件 , 都打包 编译 , 这样 , 会非常 消耗 CPU , 同时 , 打包速度 非常慢 ;
    • 2.2.2 哪怕, 最终 babel 把 所有的 node_modules 中的 JS 转换完毕了 , 但是 项目也 无法正常 运行
• 3. 在项目的 根目录中 , 新建一个 叫做 .babelrc 的 Babel 配置文件, 这个 配置文件 属于 JSON格式 , 所以 在写 .babelrc 配置的 时候 , 必须符合 JSON 语法规范 : 不能写注释 , 字符串 必须用 双引号
  • 3.1 在 .babelrc 写如下的 配置: presets: 可以翻译成 语法的意思 plugins: 插件
    
    

    babelrc文件.png

        {
            "presets": ["env", "stage-0"],
            "plugins": ["transform-runtime"]
        }

***** 默认, webpack 无法打包 .vue 文件 , 需要安装相关的 loader:

1. cnpm i vue-loader vue-template-compiler -D
2. 在配置文件中 , 新增 loader 配置项 { test:/\.vue$/, use: 'vue-loader' }

***** 总结梳理: webpack中 如何使用 vue

1. 安装 vue 的包: cnpm i vue -S
2. 由于 在 webpack中 , 推荐使用 .vue 这个组件模板文件定义组件 , 所以 , 需要安装 能解析这种文件 的 loader , cnpm i vue-loader vue-template-compiler -D
   3.在 main.js 中 , 导入 vue 模块 import Vue from 'vue'
3. 定义一个 .vue 结尾的 组件, 其中 组件由三部分组成 : template script style
4. 使用 import 导入这个组件 import login from './login.vue'
5. 创建 vm实例 var vm = new Vue({ el: '#app', render: c => c(login) })
6. 在页面中 创建 一个 id 为 app 的 div元素 , 作为我们 vm 实例 要控制 的 区域