Webpack自动化构建工具

作者：桑榆
QQ：934440653
有问题，评论留言，或qq联系

第一步 .安装node.js

1.安装淘宝镜像(可选)

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.检查node-v

安装教程：https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html

3.检查npm-v

第二步 搭建webpack

官方文档：https://webpack.js.org/configuration

1.初始化项目

npm init(推荐) 或者 npm init -y

配置文件：npm install

2.安装webpack

进入项目文件 局部安装：进入文件夹 npm i -D webpack (推荐)

或 进入项目存储磁盘 全局安装：输入npm install webpack -g

3.webpack4+以上版本

需装：npm install --save-dev webpack-cli

4.打开package.json配置：

通过npm run即可查看以下的配置命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

对应打包命令：

​ 开发模式打包 npm run dev

​ 生产模式 npm run build

​ 全局安装使用命令 webpack 打包

5.配置webpack.config.js

在根目录下，手动添加一个js文件，命名为webpack.config.js。

1.入口（entry points）

需要打包的文件

• 单入口

module.exports = {
    entry : './app/main.js',
}

• 多入口

module.exports = {
    entry : {
       main: './app/main.js',
       test:'./app/test.js',
      // main:["./app/main2","./app/main3"]  合并打包，输出在在一个js文件中
    },
}

• 输出到不同目录

const path = require("path");
module.exports = { 
	entry : {
       'bb1/main': './app/main.js',
       'bb2/test':'./app/test.js'
    },
  }
output : {
        path : path.join(__dirname,'build'),
        // path: path.resolve(__dirname, './dist'),
        filename : '[name].js',
},
  //打包后会在build下生成bb1与bb2两个文件夹，在各自文件夹下生成对应的打包js

2.输出（output）

• 单入口输出

module.exports = {
    output : {
        path : path.join(__dirname,'build'),
        //或者 path：__dirname + '/dist',
        filename : 'xx.js'
    }  
  //path ：目标输出目录 path 的绝对路径,会在根目录下生成一个'build'的文件              夹，放置打包后的文件。
  //filename ：用于输出文件的文件名，自定义命名。
}

• 多入口输出

module.exports = {
    output : {
        path : path.join(__dirname,'build'),
      	//或者 path：__dirname + '/dist',
        filename : '[name].js'
    },
  //path ：目标输出目录 path 的绝对路径
  //filename ： 用于输出文件的文件名，命名使用对象入口文件的name，打包后会在'build'下,生成对应入口文件数量的输出文件。
}

3.模式（ mode）

module.exports = {
    mode:'development'
    //或者  mode:'production'
}
//mode 配置选项，告知 webpack 使用相应模式的内置优化。
//development 开发模式  production 生产模式

*注：在此步骤之前都为必要步骤

以上配置结束可执行打包命令完成简单的打包需求：

​ 开发模式打包 npm run dev

​ 生产模式 npm run build

​ 全局安装使用命令 webpack 打包

4.loader

可以将文件从不同的语言（如 TypeScript）转换为 JavaScript；除了js以外的文件需要配置loader

在你的应用程序中，有三种使用 loader 的方式：

• 配置](https://www.webpackjs.com/concepts/loaders/#configuration)（推荐）：在 webpack.config.js 文件中指定 loader。
• 内联：在每个 import 语句中显式指定 loader。
• CLI：在 shell 命令中指定它们。

推荐配置loder：加载顺序从右向左加载

//打包css需要在入口文件中导入css文件路径，require("../css/index.css");
module.exports = {
   module:{
        rules:[
            {
                test: /\.css$/,  // 正则匹配所有.css后缀的样式文件  
                use: ['style-loader', 'css-loader'] // 使用这两个loader来加载样式文件 
            }
        ]
    }
}
//test:匹配打包文件的后缀
//use : 根据加载不同文件使用不同的loader，一个loader每次只做一次单一的转换
//需要桶过npm 安装对应的loader

1）.js的loader

默认webpack只支持JS，不需要安装

cnpm install babel-preset-latest  --save-dev
cnpm install babel loader babel-core babel-plugin-transform-runtime babel-preset-es2015  babel-runtime --save-dev

1. Jquery暴露

   npm install --save expose-loader

module:{
        rules:[
            
            {
                test: require.resolve('jquery'),
                use: [{
                   loader: 'expose-loader',
                   options: 'jQuery'
                },{
                   loader: 'expose-loader',
                   options: '$'
                }]
             }
        ]
    },

2）.css的loader

• 普通打包，将css代码打包在js中

cnpm install style-loader css-loader --save-dev

module:{
        rules:[
            {
                test: /\.css$/,  // 正则匹配所有.css后缀的样式文件  
                use: ['style-loader', 'css-loader'] // 使用这两个loader来加载样式文件 
            },
        ]
    },   

• 将css从js分离，详见插件部分

3）.img的loader

• url引用图片

  npm install url-loader --save-dev   //小于limit 转为base64
  npm install file-loader --save-dev  //大于limit 引用路径

​

 module:{
        rules:[
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader',
                options:{
                    limit:10000,
                    name:'img/[name].[ext]',
                    publicPath:'../../js/sea'
                }
            },
          
          
            // {
            //     test: /\.(png|jpg|gif)$/,
            //     loader: 'file-loader',
            //     options:{
            //         limit:10000,
            //         name:'img/[name].[ext]',
            //         publicPath:'../../js/sea'
            //     }
            // },
        ]
    },   
//loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于10k的图片正常打包，小于10k的图片以 base64 的方式引用。
// query 是旧版本写法，options 是新版写法。
// publicPath 打包后文件存放地址
        
 
 

• html引用 npm install html-withimg-loader --save-dev

由于 webpack 对 html 的处理不太好，打包 HTML 文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件—— html-withimg-loder
webpack.config.js 添加配置
module: {
　　loaders: [
　　　　{
　　　　　　test: /\.html$/,
　　　　　　loader: 'html-withimg-loader'
　　　　}
　　]
}

4）.sass的loader

cnpm install sass-loader node-sass webpack --save-dev

5）.模板的loader

cnpm install html-loader --save-dev  ( html )
cnpm install ejs-loader --save-dev   ( ejs )

6）.html

npm install html-webpack-plugin --save-drv

5.插件(plugins)

webpack插件分为两种，一种是内置插件，另一种是第三方插件，需要npm安装，require引用后才可使用。

1）mini-css-extract-plugin

• css代码从js中分离出来

npm install style-loader css-loader --save-dev
npm install --save-dev mini-css-extract-plugin

//引用插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module:{
        rules:[
            {
                test: /\.css$/,  // 正则匹配所有.css后缀的样式文件 
                use: [
                    {
                      loader: MiniCssExtractPlugin.loader,
                      options: {
                        publicPath: './build'  //打包后的css放置位置
                      }
                    },
                    "css-loader"
                  ]
            },            
        ]
    },
     plugins: [
        new HtmlWebpackPlugin({title:'测试'}),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            // chunkFilename: "[id].css"
          })
    ],

2）html-webpack-plugin

相关参数用法：https://segmentfault.com/a/1190000007294861

npm i --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
module.exports = {
   plugins: [
    new HtmlWebpackPlugin({
      title:'测试',
      filename: '../../index-[hash].html', //通过模板生成的文件 以及路径
      template: 'neiyi.html',  //模板路径 以根index.html为模板生成
      inject: 'body', //指定插入js的位置 head或body
    }),
  ]
}
//title:重命名html导航名
 // optimization: {
    //     splitChunks: {
    //         cacheGroups: {
    //             commons: {
    //                 name: "jquery",
    //                 // chunks: ['loadCMD','initPageCMD'],
    //                 minChunks: 2,
    //                 filename:'./js/item1201/lvshifu/[name].js'
    //             }
    //         }
    //     }
    // },

3）extract-text-webpack-plugin

抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象

npm i -D extract-text-webpack-plugin 

6.配置别名resovle

在项目js中可以直接引用别名，不用在找路径

module:{
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                presets: ['es2015']
            }
        }]
    },
  resolve: { //配置别名，在项目中可缩减引用路径
        alias: {
            threeModule: path.resolve(__dirname, 'js/96/three.module.js'),
            buildLib: path.resolve(__dirname, 'js/item/build/buildLib.js'),
        }
    },

6.ES6转ES5，项目完结打包

1.安装babel

  npm install babel-core --save-dev
  npm install [email protected]  --save-dev  //明确版本号
  npm install babel-preset-es2015 --save-dev
  npm install babel-plugin-transform-runtime

问题与解决

问题：
ERROR in ./app/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In E:\webpackSpace\webpack3\node_modules\babel-preset-es2015\lib\index.js
//babel-loader版本号不支持
解决：
//卸载原babel-loader
npm uninstall babel-loader
//安装明确版本
npm install [email protected] --save-dev

2.webpack.config.js配置：

 module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options:
                {
                    presets: ['es2015'],
                    plugins: ['transform-runtime']
                }
            },
        ]
    },
    // exclude:   node_modules目录下的文件除外
    //presets: ['react','es2015'],来标识如何将ES6语法转成ES5以及如何转换React的JSX成js文件

7.项目实时打包

1.webpack.config.js配置

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch":"webpack --watch",
  },

2.执行

npm run watch

8.ES6转ES5,开发实时转码

1.安装

npm install --global babel-cli

2.webpack.config.js配置

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //单一js转换
    "transcod": "babel app/main.js --watch --out-file build/main1.js"
    
    //将app文件夹下所有js，转换到build文件夹下
    // "transcod": "babel app --watch --out-dir build"
  },
    
    "babel":{ 
      "presets": [ "es2015" ] 
    },
    
    
//transcod :自定义命名 打包使用
//app/main.js ：转化文件位置
//--watch 等同于 -w ：  实时监听
//--out-file 等同于 -o ：输出
//build/main1.js ：输出文件存放位置

3.执行

npm run transcod

4.实时更新只需在原js修改后ctrl+s即可

9.浏览器自动刷新

安装

npm install webpack-dev-server --save-dev

配置

"scripts": {    
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "webpack-dev-server --env development",
 },   

执行 npm run start （默认为：http://localhost:8080，一定执行控制台的地址 ）

修改入口文件代码，保存后页面会自动刷新，提高开发效率。

注：该刷新是页面的全局刷新，根据需要可以局部刷新，需要配置。

10.DevServer

更多配置看文档：https://webpack.js.org/configuration/dev-server/

npm install webpack-dev-server --save-dev

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};
//contentBase：根路径
//compress：true/false 压缩
//port:配置服务器端口号
创建一个html文件，端口号为port，自动到将打包后的js文件在该html中引用

1.https

devServer: {
   port: 9000,
   https: true
}
无配置：http://localhost:9000/
当前访问地址：https://localhost:9000/

11.配置ESLint实现代码自动规范

官网：https://eslint.org/docs/rules/

在代码编译是将代码中不规范的地方以警告，或者报错的方式显示出来

1.安装

npm install eslint --save-dev

2.配置package.json

"scripts": {
    "lintjs":"eslint app/ webpack.*.js --cache"
  },
    // app/为入口文件目录，根据项目文件命名更改

3.新建文件.eslintrc.js

module.exports = {
    env:{
        browser:true,
        commonjs:true,
        es6:true,
        node:true
    },
    exports:'eslint : recommended',
    parserOptions:{
        sourceType:'module',
    },
    rules:{
        'comma-dangle':['error','always-multiline'],
        indent:['error',2],
        'linebreak-style':['error','unix'],
        quotes:['error',single],
        semi:['error','always'],
        'no-unused-vars':['warn'],
        'no-console':0,
    },
};

4.执行

执行npm run lintjs 有错误警告在控制太显示出来

执行npm run lintjs – --fix 会修改代码中不规范的部分，警告需要手动修改

5.将错误信息在浏览器中显示配置信息

devServer: {
   overlay:{
      error:true,
      warnings:true,
  }
}
 // 配合浏览器在动刷新，能快速的找到警告和代码错误

6.特定项忽略检测配置

1. 放置在库的前面，忽略检测
	/* eslint-disable */  
2.特定Obj，对象，变量，忽略 例如：TWEEN
	/*global TWEEN:true*/
    /*eslint no-undef: "error"*/

Gulb

node介绍

js文件，最初由客户端向服务器发送引入js文件的请求，服务器将整个js文件响应给客户端，由浏览器中的js引擎进行运行。

如果，服务器中有node环境（在node中具有浏览器的js引擎），则客户端的js请求，会在服务器中执行，服务器将执行结果，返回给客户端。

node(基于谷歌v8引擎)中的js引擎，将各大浏览器中js引擎，没单独拿出来，进行封装，升级（增加API，建立文件io操作，网络操作，数据库操作）。

第一步安装插件

1.Terminal插件，显示到当前的目录

2.Browsersync + Gulp.js

http://www.browsersync.cn/docs/gulp/

 npm install browser-sync gulp --save-dev

3.gulp-less

npm install gulp-less -D
npm install --save-dev gulp-concat 文件打包
npm install --save-dev gulp-rename 文件重命名
npm install -g gulp-imagemin 图片压缩
npm install -g gulp-jslint js代码校验 慎用
npm install -g gulp-minify-css css压缩
npm install -g gulp-minify-html html压缩
npm install --save-dev gulp-uglify js压缩
npm install --save-dev gulp-seajs-combo
npm install gulp-seajs-combine

第二步搭建gulb环境

1.初始化项目

npm init -y

2.安装gulb依赖

npm install gulp --save-dev 局部安装

npm install -g gulp 全局安装

检查 gulp -v

3.创建gulpfile.js文件

1.初始化

var gulp = require('gulp');
	gulp.task('default',function(){  
      console.log("gulp启动成功...")
})

2.gulp.src文件导入

gulp.task('less',function(){   //less要处理文件的类型
    gulp.src('./src/css/main.less') //src要处理人物的位置 
	.pipe(gulp.dest('build'))
})
//./src/css/main.less  指定特定文件
// ['src/js/*js','src/css/*css','*.html']   匹配指定文件夹下所有文件
// ['src/src/js/*js','src/js/!b*js']  排除以b开头的js，切记排除不能放置在第一位
// src/**/*.js   当前目录下所有目录内的js

3.gulp.dest

4.gulp.task

5.gulp.watch

gulp.watch('src/**/*.js',function(e){        //less要处理文件的类型
    // gulp.src(['src/**/*.js','src/css/*css']) // src要处理人物的位置
    // .pipe(less())                     //流
    // .pipe(gulp.dest('build'))
    console.log(e.type)
    console.log(e.path)
})

webpack+项目实战

1.安装npm依赖包

在根目录下输入npm install安装

2.运行项目

输入命令行npm run dev(开发模式)，或者npm run build(生产模式)