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(生產模式)