Webpack、Gulp构建工具使用方法及步骤

一、Webpack的使用方法

在项目中安装和配置webpack

运行npm install webpack webpack-cli -D 命令，安装webpack相关的包
在项目根目录下，创建名为 webpack.config.js 的 webpack 配置文件
在 webpack 的配置文件中，初始化如下基本配置:

module.exports = {
    mode: 'development'  //mode用来初始化构建模式(development-------开发模式; production----产品发布模式)
}

npm init -y 生成 package.json 配置文件，在配置文件中的 scripts 节点下，新增 dev 脚本如下:

"scripts": {
    "dev": "webpack"    //script 节点下的脚本，可以通过 npm run 执行
}

在终端中运行 npm run dev 命令，启动 webpack 进行项目打包

webpack的基本使用

1. 配置打包的入口与出口

通过改变 webpack.config.js 来设置入口/出口的js文件，如下：

const path = require("path");
module.exports = {
    mode:"development",
    //设置入口文件路径
    entry: path.join(__dirname,"./src/xx.js"),
    //设置出口文件
    output:{
        //设置路径
        path:path.join(__dirname,"./dist"),
        //设置输出文件名称
        filename:"bundle.js"
    }
}

2. webpack自动打包

A.安装自动打包功能的包: webpack-dev-server
输入命令: npm install webpack-dev-server -D

B.修改package.json中的dev指令如下：

"scripts":{
   "dev":"webpack-dev-server"
}

C.将引入的js文件路径更改为：
D.运行 npm run dev，进行打包

3. 配置生成预览页面

A.安装默认预览功能的包: html-webpack-plugin
输入命令： npm install html-webpack-plugin -D
npm install clean-webpack-plugin

B.修改 webpack.config.js 文件，如下：

//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");

//导入清除dist插件 不用手动每次去删除dist文件夹
const clearWebpackPlugin= require("clean-webpack-plugin"); 

//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件
    template:"./src/index.html",
    //设置生成的预览页面名称,该文件存在于内存中，在目录中不显示
    filename:"index.html"
})

const  clearPlugin=new clearWebpackPlugin() //导入模块清除dist插件不用手动每次去删除dist文件夹

C.继续修改webpack.config.js文件，添加plugins信息：

module.exports = {
    ...
    plugins:[ htmlPlugin,clearPlugin ]
}

自动打包的参数

//package.json中的配置
//--open 打包完成后自动打开浏览器、
//--host 配置IP地址
//--post 配置端口
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

注意! 修改了配置文件就要重新运行命令： npm run dev

Webpack 加载器

1.通过loader打包非js模块

在实际开发中，webpack默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结尾的模块，webpack默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

1. 打包处理 css 文件

运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的loader
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

//所有第三方文件模块的匹配规则
module:{
    rules:[
        { test:/\.css$/,use:['style-loader','css-loader'] }
    ]
}
//test 表示匹配的文件类型; use表示对应要调用的 loader

注意

use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是: 从后往前调用

2. 打包处理 less 文件

运行 npm i less-loader less -D 命令

module:{
    rules:[
        { test:/\less$/,use:['style-loader','css-loader','less-loader'] }
    ]
}

3. 打包处理 scss 文件

运行 npm i sass-loader node-sass -D 命令

module:{
    rules:[
        { test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }
    ]
}

4. 配置 postCSS 自动添加 CSS 的兼容前缀

运行 npm i postcss-loader autoprefixer -D 命令
在项目根目录中创建 postcss 的配置文件 postcss.config.js,并初始化以下配置:

 const autoprefixer = requier('autoprefixer')    //导入自动添加前缀的插件
module.exports = {
   plugins: [ autoprefixer ] //挂载插件
}

在webpack.config.js 的 module -> rules 数组中，修改 css 中的 loader 规则如下：

module:{
    rules:[
        { test:/\.css$/,use:['style-loader','css-loader'，'postcss-loader'] }
    ]
}

5. 打包样式表中的图片和字体文件

运行 npm i url-loader file-loader -D 命令

module:{
    rules:[
        { 
            test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            use:'url-loader?limit=xxxx'
        }
    ]
}
// 其中 ? 之后的是 loader 的参数项
limit 用来指定图片的大小，单位是字节(byte), 只有小于 limit 大小的图片，才会被转换为 base64 图片

6. 打包处理 js 文件中的高级语法

安装 beble 转换器相关的包: npm i babel-loader @babel/core @babel/runtime -D
安装 babel 语法插件相关的包: npm i @babel/preset-env @bable/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在项目根目录中，创建 babel 配置文件 babel.config.js,并初始化配置如下:

module.exports = {
    presets: ['@babel/preser-env'],
    plugins: [ '@bable/plugin-tranform-runtime','@babel/plugin-proposal-class-properties' ]
}

在webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module:{
    rules:[
        //exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
        { test:/\.js$/,use:'babel-loader',exclude: /node_modules/ }
    ]
}

单文件组件 ----- 文件名.vue (eg: App.vue)

1. webpack 中配置 vue 组件的加载器

运行 npm i vue-loader vue-template-compiler -D 命令

module.exports = {
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    module:{
        rules:[
            { test:/\.vue$/,use:'vue-loader' }
        ]
    },
    plugins:[ 
        //其他插件
        new VueLoaderPlugin() 
    ]
}

2. webpack 项目中使用 vue

运行 npm i vue -S 安装 vue
在 src ->index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数
创建 vue 实例对象，并指定要控制的 el 区域
通过 render 函数渲染 App 组件

// 1. 导入 vue 构造函数
import Vue from 'vue'
// 2. 导入 App 根组件
import App from './App.vue'

const vm = new Vue({
    // 3. 指定 vm 实例要控制的页面区域
    el: '#app',
    // 4. 通过 render 函数，把指定的组件渲染到 el 区域中
    render: h=>h(App)
})

Gulp的使用

基于node平台开发的构建工具,步骤如下：

使用npm install gulp下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目下的文件结构，src目录存放源代码文件，dist目录存放构建后的文件
在gulpfile.js文件中编写任务
在命令工具中执行gulp任务

二、Gulp提供的方法

gulp.task(): 建立gulp任务
gulp.src(): 获取要处理的文件
gulp.dest(): 输出文件
gulp.watch() :监控文件的变化

// 引用gulp模块
const gulp = require('gulp');
/* 使用gulp.task()方法建立任务
1、任务的名称， 2、任务的回调函数 */
gulp.task('first', () => {
    //获取要处理的文件
    gulp.src('./src/css/index.css')
        //将处理后的文件输出到dist目录
        .pipe(gulp.dest('dist/css'));
});

命令窗口输入命令：
npm install gulp-cli -g
gulp first

Gulp插件

(1)下载插件： npm install 插件名称; (2)gulpfile.js文件中引入插件：require('插件名称'); (3)调用插件

gulp-htmlmin: html文件压缩
gulp-less: less语法转换
gulp-csso: 压缩css
gulp-babel: JavaScript语法转换
gulp-uglify: 压缩混淆JavaScript
gulp-file-include: 公共文件包含
browsersync: 浏览器实时同步

<!-- html文件压缩 -->
// 1.引入插件
const htmlmin = require('gulp-htmlmin');
//公共文件包含
const fileinclude = require('gulp-file-include');

//调用插件
gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
        //抽取html文件中的公共代码  require('gulp-file-include');
        .pipe(fileinclude())
        //压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'))
});

//css压缩 
//1、less语法转换 const less = require('gulp-less');
//2、css代码压缩 const csso = require('gulp-csso')
gulp.task('cssmin', () => {
    // gulp.src('./src/css/*.less')
    //选择css目录下的所有less文件以及css文件
    gulp.src(['./src/css/*.less', './src/css/*.css'])
        //将less语法转换为css语法
        .pipe(less())
        //将css代码进行压缩
        .pipe(csso())
        //将处理的结果进行输出
        .pipe(gulp.dest('dist/css'))
});

//js任务
//1、es6代码转换 const babel = require('gulp-babel');
//2、代码压缩 const uglify = require('gulp-uglify')
gulp.task('jsmin', () => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            //他可以判断当前代码的运行环境 将代码转换成当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        //压缩代码
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

//复制文件夹
gulp.task('copy', () => {
    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'))

    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'))
});

//构建任务                  
gulp.task('my-tasks', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy', () => {

}));