前端模块化和Webpack简单介绍(上)

前端模块化

为什么要使用模块化？

解决代码命名重复的问题
代码复用

模块化的核心：导入和导出

ES5中模块化的实现

导出

// 在index.js文件中
var moduleA = (function(){

  var bookList = ["Python快速编程入门","概率论与数理统计","数据结构与算法"]
  function sum(n1,n2){
    return n1 + n2
  }
  // ...
  var obj = {
    bookList,
    sum
  }
  return obj
})()

导入

// 在另一份js文件中
;(function(){
  console.log(moduleA.bookList)
  console.log(moduleA.sum(30,50))
})()

ES5实现模块化

常见的模块化规范

CommonJS

注意：
module.exports 和 require 需要在node.js环境下才能发挥作用

导出

// 在index.js文件中
  var bookList = ["Python快速编程入门","概率论与数理统计","数据结构与算法"]
  function sum(n1,n2){
    return n1 + n2
  }
  // ...
  module.exports = {
    bookList,
    sum
  }

导入

// 在另一份js文件中
var {bookList,sum} = require('./index.js')
console.log(bookList)
console.log(sum(30,50))

ES6中的Modules

  <!-- 加入  type="module" 表示将js文件作为一个独立的模块使用,有自己单独作用域 -->
  <script src="index.js" type="module"></script>
  <script src="index2.js" type="module"></script>

导出

// 在index.js文件中
  let bookList = ["Python快速编程入门","概率论与数理统计","数据结构与算法"]
  const sum = (n1,n2) =>{
    return n1 + n2
  }
  // ...
  export{
    bookList,
    sum
  }
  // 第二种导出方式, export default 在同一个 js 文件只能用一次
  // export default function(){
  //   // ...
  // }

// 其它导出
  export let name = "hhh"

导入

// 在另一份js文件中
import {bookList,sum,name} from './index.js'

// 第二种导入可以自己命名变量
// import myFun from './index.js'

// 第三种导入方式: 将index.js中所有的导出数据都放在myObj中
// myObj是一个对象,使用: myObj.sum(10,20)
// import * as myObj from './index.js'

console.log(bookList)
console.log(sum(30,50))

ES6中的Modules

AMD

CMD

Webpack

什么是webpack？

从本质上来讲，webpack 是一个现代的 JavaScript 应用的静态模块打包工具

webpack 和 grunt/gulp 的不同

grunt/gulp 强调的是前端流程的自动化，模块化不是它的核心
webpack 强调模块化开发管理，而文件的压缩合并、预处理等功能只是附带的

webpack的安装

webpack 依赖于node环境，所以必须先安装node.js,详细安装步骤点击这里，而 Node.js 自带了软件包管理工具 npm
注意 : node的版本必须大于 8.9

1.安装完node.js后，查看node版本

node版本

2.全局安装指定版本的 webpack

webpack安装

3.查看 webpack 的版本

查看 webpack 的版本

webpack的起步

根据以下的文件目录新建工作目录

新建目录

在编译器中编写模块化依赖代码，这里使用 CommonJS 模块化规范
在mathUtils.js文件中，导出函数

function add(num1,num2){
  return num1 + num2
}

module.exports = {
  add
}

在main.js中，导入函数

const {add,mul} = require('./mathUtils.js')
console.log(add(20,30))

打开webpack的起步终端，输入以下代码

webpack ./src/main.js ./dist/bundle.js

看到以下情况，则为打包成功

打包成功
在index.html文件中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 这里只需引用 bundle.js 文件即可 -->
  <script src="./dist/bundle.js"></script>
</body>
</html>

运行程序，出现结果

运行程序

总结：
1.创建工作目录，打开对应根文件夹的终端
2.书写模块化的代码，其中 main.js 文件为项目入口文件
3.输入 webpack 入口文件目录打包到指定目录(出口)
4.在 index.html 文件只需引用 指定目录文件 即可，生成的指定目录文件中，包含该入口函数中的各种依赖关系

webpack的相关配置

生成package.json配置文件
1.打开对应根文件夹的终端
2.输入npm init，回车
3.给项目起一个别名，最好全部用小写，然后全部回车
4.自动生成 package.json 文件，里面包含刚刚的配置
5.输入npm install，回车,生成package-lock.json文件
6.package.json：通过npm init 生成，npm包管理的文件
配置webpack.config.js文件
1.新建 webpack.config.js 文件，与 index.html 文件为兄弟关系
2.写入代码

// path为一个模块,依赖于 node 的包,上一步已经生成
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    // __dirname:全局变量,保存当前文件(webpack.config.js)所在的路径
    // 拼接上 dist
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

3.在终端输入 webpack，回车，看到下面情况，打包成功

打包成功

更改 package.json 文件
1.用 npm run build 指令映射为 webpack 指令

更改配置

2.在终端输入 npm run build，回车，看到下面情况，打包成功

打包成功

安装本地的webpack

由于运行 npm run build 指令会优先使用本地的webpack，本地没有安装，就会使用全局的webpack，这就造成从别人那里clone的项目不能运行(别人项目运行时使用的webpack版本和自己电脑全局的webpack版本不一致)，所以本地也需要安装webpack
1.终端输入 npm install webpack@3.6.0 --save-dev

3.6.0：webpack的版本号
--save-dev：由于项目在浏览器运行时不再使用webpack，--save-dev 为开发时依赖
--save：项目在浏览器运行时需要使用webpack，--save 为运行时依赖
2.安装成功后，目录中多了node_modules文件夹，在终端运行 npm run build

打包成功

3.注意：只要是在终端输入的命令(如 webpack)，都是去使用全局的，而我们在 package.json 中写入了脚本，在本目录的终端输入(npm run build)优先使用局部的(本地的)

安装loader

什么是loader

在我们开发过程中，不仅仅会使用js代码，还可能使用ES6、less、scss .vue文件等等，而 loader 能将我们这些浏览器不识别的代码或文件转化成浏览器能识别的代码或文件

loader 的安装步骤

通过npm 安装需要使用的 loader
在 webpack.config.js 中的 module 关键字下进行配置

webpack中使用css文件

文件目录

目录

在index.css中

div{
  width: 100px;
  height: 100px;
  background-color: #f00;
}

在main.js中添加css文件依赖

// 对 css 文件形成依赖
require('./css/index.css')

打开webpack中文文档，点击 loaders

LOADERS

css-loader
根据步骤安装 css-loader

npm install --save-dev css-loader

  module: {
    rules: [
      {
        test: /\.css$/,
        // loader 从右向左读取
        // css-loader   只负责加载
        // style-loader 将样式添加到DOM中
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

还需安装 style-loader ，点击这里，此时 style-loader 不需要配置，上一步已配置
重新打包，出现结果

结果

webpack中使用图片

一. 安装url-loader

npm install --save-dev url-loader

二. 修改webpack.config.js配置文件

{
  text:/\.(png|jpg|gif|jpeg)$/,
  use:[
  {
       loader:'url-loader',
       options:{
        limit:8192     //8kb
       }
    }
  ]
}

如果图片小于limit值（8kb），图片是通过base64编码展示
如果图片大于limit值（8kb），则会报错，需要安装file-loader，才能正确运行

npm install --save-dev file-loader

再次打包，发现dist文件夹下多出一个图片文件

修改文件名操作

options:{
  limit:8192,
  name:'img/[name].[hash:8].[ext]'
}

设置输出路径

output:{
  path:path.resolve(__dirname, 'dist'),  //path通常是一个绝对路径
  filename:'bundle.js',
  publicPath:'dist/'
},

webpack中vue开发

安装vue

npm install vue --save

.vue文件的解析

npm install vue-loader vue-template-compiler --save-dev

{
  test:/\.vue$/,
  user:['vue-loader]
}

搭建本地服务器

npm install --save-dev webpack-dev-server@2.9.1

webpack.config.js文件配置修改如下：

devServer:{
  contentBase: './dist',
  inline: true
}

contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port：端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式

配置一个scripts：

"dev": "webpack-dev-server --open"

END