前端工程化与webpack

一、2016年前前端开发的模式:

1、会写 HTML + CSS + JavaScript 就会前端开发 2、需要美化页面样式,就拽一个 bootstrap 过来 3、需要操作 DOM 或发起 Ajax 请求,再拽一个 jQuery 过来 4、需要快速实现网页布局效果,就拽一个 Layui 过来 目前前端开发的模式: 1、模块化(js 的模块化、css 的模块化、资源的模块化) 2、组件化(复用现有的 UI 结构、样式、行为) 3、规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理) 4、自动化(自动化构建、自动部署、自动化测试) 二、前端工程化的解决方案  1、早期的前端工程化解决方案: 1.1、grunt( https://www.gruntjs.net/ ) 1.2、gulp( https://www.gulpjs.com.cn/ ) 2、 目前主流的前端工程化解决方案: 2.1、webpack( https://www.webpackjs.com/ ) 2.2、parcel( https://zh.parceljs.org/ ) 三、webpack 的基本使用 3.1、 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json 前端工程化与webpack

 3.2、新建 src 源代码目录

3.3、新建 src -> index.html 首页和 src -> index.js 脚本文件

3.4、初始化首页基本的结构

3.5、运行 npm install jquery –S 命令,安装 jQuery

3.6、通过 ES6 模块化的方式导入 jQuery

//使用ES6导入语法,导入jQuery
import $ from 'jquery'

 四、webpack 的基本使用

4.1、安装 webpack 相关的两个包

npm install webpack@5.42.1 webpack-cli@4.7.2 -D 

npm install webpack-dev-server@3.11.2 -D

4.2、在项目中配置 webpack

  1. 在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下的基本配置
    // mode 代表 webpack 运行的模式,可选值有两个 development 和 production
    // 结论:开发时候一定要用 development,因为追求的是打包的速度,而不是体积;
    // 反过来,发布上线的时候一定能要用 production,因为上线追求的是体积小,
    //而不是打包速度快!
      mode: 'development',
  2. 在 package.json 的 scripts 节点下,新增 dev 脚本 如下                                                              
    //script节点下的脚本,可以通过npm run执行,例如 npm run dev
     "scripts": {
        "dev": "webpack serve",
        "build": "webpack --mode production"
      },
  3. 在终端中运行 npm run dev 命令,启动 webpack 进行项目的打包构建
五、webpack 中的默认约定 在 webpack 4.x 和 5.x 的版本中,有如下的默认约定: 5.1、 默认的打包入口文件为 src -> index.js 5.2、默认的输出文件路径为 dist -> main.js 注意:可以在 webpack.config.js 中修改打包的默认约定 六、自定义打包的入口与出口         在 webpack.config.js 配置文件中,通过 entry 节点 指定 打包的入口 。通过 output 节点 指定 打包的出口
// 使用 Node.js 中的导出语法,向外导出一个 webpack 的配置对象
const path = require('path')
module.exports = {
  // entry: '指定要处理哪个文件'
  entry: path.join(__dirname, './src/index1.js')
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'js/bundle.js'
},

webpack配置文件如下:

const path = require('path')

// 1. 导入 html-webpack-plugin 这个插件,得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. new 构造函数,创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})

// 注意:左侧的 { } 是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 使用 Node.js 中的导出语法,向外导出一个 webpack 的配置对象
module.exports = {
  // 在开发调试阶段,建议大家都把 devtool 的值设置为 eval-source-map
  // devtool: 'eval-source-map',
  // 在实际发布的时候,建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
  devtool: 'nosources-source-map',
  // mode 代表 webpack 运行的模式,可选值有两个 development 和 production
  // 结论:开发时候一定要用 development,因为追求的是打包的速度,而不是体积;
  // 反过来,发布上线的时候一定能要用 production,因为上线追求的是体积小,而不是打包速度快!
  mode: 'development',
  // entry: '指定要处理哪个文件'
  entry: path.join(__dirname, './src/index1.js'),
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'js/bundle.js'
  },
  // 3. 插件的数组,将来 webpack 在运行时,会加载并调用这些插件
  plugins: [htmlPlugin, new CleanWebpackPlugin()],
  devServer: {
    // 首次打包成功后,自动打开浏览器
    open: true,
    // 在 http 协议中,如果端口号是 80,则可以被省略
    port: 80,
    // 指定运行的主机地址
    host: '127.0.0.1'
  },
  module: {
    rules: [
      // 定义了不同模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      // 处理 .less 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 处理图片文件的 loader
      // 如果需要调用的 loader 只有一个,则只传递一个字符串也行,如果有多个loader,则必须指定数组
      // 在配置 url-loader 的时候,多个参数之间,使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
      // 使用 babel-loader 处理高级的 JS 语法
      // 在配置 babel-loader 的时候,程序员只需要把自己的代码进行转换即可;一定要排除 node_modules 目录中的 JS 文件
      // 因为第三方包中的 JS 兼容性,不需要程序员关心
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  resolve: {
    alias: {
      // 告诉 webpack,程序员写的代码中,@ 符号表示 src 这一层目录
      '@': path.join(__dirname, './src/')
    }
  }
}

上一篇:选择器冲突解决方案、命名空间 BEM、模块化、scss、


下一篇:sass的安装及使用