精华内容
下载资源
问答
  • webpack5打包笔记

    2021-02-10 22:16:12
    文章目录webpack5是啥有啥作用webpack安装和基本体验一些需要了解的概念基本体验webpack的配置文件配置文件中的5大核心概念entry 和 output单入口单出口文件多入口单出口文件多入口多出口文件混合文件打包html资源...

    webpack5是啥有啥作用

    是啥:本质上,webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。

    作用:webpack 分析项目代码将可扩展的语言转换成浏览器可以认识的代码,优化压缩无用代码,压缩资源文件。
    在这里插入图片描述

    webpack安装和基本体验

    一些需要了解的概念

    树结构(依赖图):在一个入口文件引入所有资源所形成的依赖关系树状图
    模块:所有的资源都可以看做模块
    chunk:打包过程中被操作的模块文件叫做chunk
    bundel:bundel是最终打包后的文件。

    基本体验

    安装脚本

    npm i webpack webpack-cli -D #安装webpack
    

    程序内容

    //one.js
    let n = 100
    
    function add(x, y) {
        return x + y;
    }
    
    function demo(str) {
        return str;
    }
    
    module.exports = {
        n,
        add,
        demo
    }
    //two.js
    const {n, add, demo} = require("./one")
    let b = 20
    let sum = add(n, b)
    module.exports = {sum}
    //index.js
    const {sum} = require("./two")
    console.log(sum);
    

    运行脚本(默认会在src下寻找index.js文件根据依赖图生成dist目录下的main.js文件

    webpack --model development  
    webpack --model production
    

    在这里插入图片描述

    webpack的配置文件

    webpack 配置文件webpack.config.js
    作用: 指示 webpack 干那些活,当运行 webpack 指令时会加载其中配置
    构建工具(webpack.config.js)基于nodejs平台运行的,模块化默认采用commonjs,而项目文件(src内文件)采用的是ES6语法

    const {resolve} = require('path');
    module.exports = {
         // webpack 配置
         /* 入口文件 */
         entry: './src/main.js',
         /* 输出 */
         output: {
             /* 输出文件名 */
             filename: "bulid.js",
             /* 输出路径 一般采用绝对路径 */
             path: resolve(__dirname, 'build')
         },
         /* loader配置 */
         module: {
             rules: [
             ]
         },
         /* plugins配置 */
         plugins: [
         ],
         /* 模式 */
         mode: "development" // development || production
     }
    

    配置文件中的5大核心概念

    1. entry
      入口(entry)指示webpack以哪些文件作为入口起点开始打包,分析构建内部依赖图。
    2. output
      输出(output)指示webpack打包后的资源 bundles 输出到哪里,以及如何命名。
    3. loader
      loader让webpack能够去处理那些非JavaScript资源css、img等,将它们处理成webpack能够识别的资源,可以理解成一个翻译过程
      (webpack自身只能理解js和json)。
    4. plugins
      插件(plugins)可用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。
    5. mode
      模式(mode)指示webpack使用相应模式的配置。
      开发模式(development):配置比较简单,能让代码本地调试运行的环境。
      生产模式(production):代码需要不断优化达到性能最好。能让代码优化上线运行的环境。

    entry 和 output

    单入口单出口文件

     entry: './src/index.js',  //单入口单出口模式
     output: {
          //输出文件名
          filename: "build.js",
              //输出路径 一般采用绝对路径
          path: resolve(__dirname, 'build')
      },
    

    在这里插入图片描述

    多入口单出口文件

    新建js文件three.js

    console.log("这是第三个js");
    
     entry: ['./src/index.js','./src/three.js'], 
     output: {
          //输出文件名
          filename: "build.js",
              //输出路径 一般采用绝对路径
          path: resolve(__dirname, 'build')
      },
    

    在这里插入图片描述

    多入口多出口文件

     entry: ,  //单入口单出口模式
     output: {
          //输出文件名
          filename: "build.js",
              //输出路径 一般采用绝对路径
          path: resolve(__dirname, 'build')
      },
    

    在这里插入图片描述

    混合文件

        entry:{
            three: ['./src/three.js','./src/one.js'],
            index:'./src/index.js'
        },
        output: {
            filename: "[name].js",
            path: resolve(__dirname, 'build')
        },
    

    打包的three.js中多出了one.js
    在这里插入图片描述

    打包html资源

    下载 html-webpack-plugin 插件

    npm i html-webpack-plugin -D
    

    引用插件

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    

    配置使用插件

     plugins: [
            new HtmlWebpackPlugin()
     ],
    

    使用单入口单出口打包
    在这里插入图片描述

    配置插件的属性

    plugins: [
            new HtmlWebpackPlugin({
                // 复制 './src/index.html'文件, 并自动引入打包输出的所有资源(JS/CSS)
                template: "./src/index.html",
    		   // 默认是index.html名称,通过filename设置输出文件名称
    	        filename: "demo.html",
    	        //设置压缩属性
    	        minify: {
                    // 移除空格
                    collapseWhitespace:true,
                    // 移除注释
                    removeComments:true
                }   
            })
        ],
    

    配置多html文件打包

    const {resolve} = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
       entry:{
            jq:'./src/js/jquery.js',
            card: ['./src/js/card.js','./src/js/oneb.js'],
            user:'./src/js/user.js'
        },
        output: {
            filename: "js/[chunkhash].js",
            path: resolve(__dirname, 'build')
        },
        /* loader配置 */
        module: {
            rules: []
        },
        /* plugins配置 */
        plugins: [
            new HtmlWebpackPlugin({
                template: "./src/html/card.html",
                filename: "card.html",
                chunks: ["card","jq"],
            }),
            new HtmlWebpackPlugin({
                template: "./src/html/user.html",
                filename: "user.html",
                chunks: ["user","jq"],
            })
        ],
        /* 模式 */
        mode: "development" // development || production
    }
    

    在这里插入图片描述

    打包CSS资源

    1. 安装css-loader和style-loader
      css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
      style-loader 的作用是把样式插入到 DOM中,方法是在head中插入一个style标签,并把样式写入到这个标签的 innerHTML里
    npm i css-loader style-loader -D
    
    1. 使用插件
    module: {
            rules: [
                {
                    test: /\.css$/,
                    use:[
                        "style-loader",
                        "css-loader"
                    ]
                }
            ]
        },
    
    1. 用法使用
      在这里插入图片描述

    webpack打包less或sass资源

    打包less

    1. 安装less依赖包
    npm i less less-loader -D
    
    1. 添加配置
    {test: /\.less$/,use:["style-loader","css-loader",'less-loader']}
    

    打包sass

    1. 安装sass依赖包
    npm i node-sass sass-loader -D
    
    1. 添加配置
    {test: /\.scss$/,use:["style-loader","css-loader",'sass-loader']}
    

    效果

    在这里插入图片描述

    提取单独css文件

    1. 安装mini-css-extract-plugin提取插件
    npm i mini-css-extract-plugin -D
    
    1. 配置使用
    //文件头引入
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    //roader中配置
    {
    test: /\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader"]
     },
     {
         test: /\.less$/,use:[MiniCssExtractPlugin.loader,"css-loader",'less-loader']
     },
     {
         test: /\.scss$/,use:[MiniCssExtractPlugin.loader,"css-loader",'sass-loader']
     }
    //插件中的配置
    new MiniCssExtractPlugin({
                filename: "./css/demo.css"
            })
    
    
    1. 效果
      在这里插入图片描述

    配置css的兼容性

    1. 安装插件
    npm i postcss-loader postcss-preset-env -D
    
    1. package.json中配置browserslist配置css兼容性
    "browserslist": [
        "> 0.2%",  //兼容80%浏览器
        "last 2 versions",//兼容最新两个版本
        "not dead"//不要死掉的浏览器
      ]
    
    1. 配置兼容插件
    {
     test: /\.css$/,use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader"]
    }
    

    新建配置文件postcss.config.js

    module.exports ={
        plugins:[
            require('postcss-preset-env')()
        ]
    }
    
    1. 效果

    在这里插入图片描述

    压缩css

    npm i optimize-css-assets-webpack-plugin -D
    
    const OptimizeCssAssetsWebpackPlugin =  require('optimize-css-assets-webpack-plugin');
     //压缩css插件配置
     new OptimizeCssAssetsWebpackPlugin()
    

    在这里插入图片描述

    打包图片

    npm i url-loader file-loader html-loader -D
    
    {
      test:/\.(png|gif|jpg|jpeg)$/,
        use:{
            loader: "url-loader",
            options: {
                limit: 8*1024,
                publicPath: './images/',
                outputPath: 'images/',
                name:'[name][hash:10].[ext]',
                esModele: false
            }
        }
    },
    {
        test: /\.html$/, loader: "html-loader"
    }
    

    在这里插入图片描述

    打包其他资源

    {
     exclude: /\.(html|js|png|gif|jpg|jpeg|css|less|scss)$/,
         loader: "file-loader",
         options: {
             publicPath: '../font/',
             outputPath: 'font/',
             name:'[name][hash:10].[ext]',
         }
     }
    
    展开全文
  • /******/ (() => { // webpackBootstrap /******/ "use strict";.../***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); /* har.

     

    webpack5差异性体现在:

    1.将外部的自执行函数的参数(模块数组)挪动到函数内部__webpack_modules__数组中,依赖模块命名更直观,且通过定义对象属性default 的值将模块导出,较清楚地呈现了源模块结构,增加了代码的可读性。

    2.__webpack_require__函数创建新对象模块上删除了id 和loaded属性。

    3.将入口模块与其它模块隔离放在尾部的自制行函数中,可以明了应用程序的初始执行顺序。

    4.增加了一些辅助函数标记模块类型。

    /******/ (() => { // webpackBootstrap
    /******/ 	"use strict";
    /******/ 	var __webpack_modules__ = ([
    /* 0 */,
    /* 1 */
    /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    
    __webpack_require__.r(__webpack_exports__);
    /* harmony export */ __webpack_require__.d(__webpack_exports__, {
    /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
    /* harmony export */ });
    /* harmony import */ var _b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
    
    
    /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (()=>{
       (0,_b_js__WEBPACK_IMPORTED_MODULE_0__.default)()
       const h1El =   document.createElement('h1').innerText = 'hello use webpack'
       return h1El
    });
    
    /***/ }),
    /* 2 */
    /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    
    __webpack_require__.r(__webpack_exports__);
    /* harmony export */ __webpack_require__.d(__webpack_exports__, {
    /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
    /* harmony export */ });
    /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (()=>{
        console.log('1222')
    });
    
    /***/ })
    /******/ 	]);
    /************************************************************************/
    /******/ 	// The module cache
    /******/ 	var __webpack_module_cache__ = {};
    /******/ 	
    /******/ 	// The require function
    /******/ 	function __webpack_require__(moduleId) {
    /******/ 		// Check if module is in cache
    /******/ 		var cachedModule = __webpack_module_cache__[moduleId];
    /******/ 		if (cachedModule !== undefined) {
    /******/ 			return cachedModule.exports;
    /******/ 		}
    /******/ 		// Create a new module (and put it into the cache)
    /******/ 		var module = __webpack_module_cache__[moduleId] = {
    /******/ 			// no module.id needed
    /******/ 			// no module.loaded needed
    /******/ 			exports: {}
    /******/ 		};
    /******/ 	
    /******/ 		// Execute the module function
    /******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    /******/ 	
    /******/ 		// Return the exports of the module
    /******/ 		return module.exports;
    /******/ 	}
    /******/ 	
    /************************************************************************/
    /******/ 	/* webpack/runtime/define property getters */
    /******/ 	(() => {
    /******/ 		// define getter functions for harmony exports
    /******/ 		__webpack_require__.d = (exports, definition) => {
    /******/ 			for(var key in definition) {
    /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
    /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
    /******/ 				}
    /******/ 			}
    /******/ 		};
    /******/ 	})();
    /******/ 	
    /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
    /******/ 	(() => {
    /******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
    /******/ 	})();
    /******/ 	
    /******/ 	/* webpack/runtime/make namespace object */
    /******/ 	(() => {
    /******/ 		// define __esModule on exports
    /******/ 		__webpack_require__.r = (exports) => {
    /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
    /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    /******/ 			}
    /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
    /******/ 		};
    /******/ 	})();
    /******/ 	
    /************************************************************************/
    var __webpack_exports__ = {};
    // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
    (() => {
    __webpack_require__.r(__webpack_exports__);
    /* harmony import */ var _hello_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
    
    
    const h1 = (0,_hello_js__WEBPACK_IMPORTED_MODULE_0__.default)()
    document.body.append(h1)
    })();
    
    /******/ })()
    ;
    展开全文
  • 本文开始讲解如何通过webpack配置文件打包,首先,来看一下项目的目录结构。 上一篇文章讲到最基础的打包方式,没有使用webpack的配置文件来打包。使用webpack配置文件就得先在目录中新建一个webpack.config.js...

    本文开始讲解如何通过webpack配置文件打包,首先,来看一下项目的目录结构。

    上一篇文章讲到最基础的打包方式,没有使用webpack的配置文件来打包。使用webpack配置文件就得先在目录中新建一个webpack.config.js文件,这个就是webpack的配置文件。

    1、新建webpack.config.js文件

    touch webpack.config.js

    2、目录

     

    3、在配置文件中编写入口文件、输出打包文件的位置

    const path = require('path');
    
    module.exports = {
        entry: './index.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        }
    }

     4、查看index.html文件,因为之前写了引入打包文件的路径是./dist/main.js,但是这里因为改成了bundle.js,所以index.html也要改一下script标签里面的src。

    <!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>Index</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
    <script src="./dist/bundle.js"></script>
    </html>

    5、开始输入打包指令

    npx webpack index.js

    成功打包后显示如下信息

     

    6、然后用浏览器打开index.html文件,还是如上次那样显示了同样的内容:

     

    7、自定义打包指令

    如果想要自定义打包指令,比如webpack.config.js文件名称改成xx.config.js,可以这样做:npx webpack --config xx.config.js

    就是在打包时加上--config。

     

    8、修改package.json文件的script配置项,也能实现自定义打包指令,比如npm run build是最常见的打包指令,那么就可以这样做:把package.json文件的scripts配置如下所示:

    值得注意的是,在npm run build之前,先把xx.config.js文件还原成webpack.config.js的命名方式,否则会出现错误:

    然后再运行 npm run build

     

     

     

    -end-

    展开全文
  • Webpack是当下使用人数最多的网页打包工具。当前其github主页的star数量为49.2k,比另一个流行的打包工具parcel(31.9k)要高不少。本人(小白一枚)由于项目需要的原因,最近几个月断断续续学习和使用webpack进行多...

    1. 背景

    Webpack是当下使用人数最多的网页打包工具。当前其github主页的star数量为49.2k,比另一个流行的打包工具parcel(31.9k)要高不少。本人(小白一枚)由于项目需要的原因,最近几个月断断续续学习和使用webpack进行多页面工程的打包,可以说是一路挖坑一路填坑,最终实现了令人满意的效果。本文将回顾一路以来遇到的主要问题,简单分析并着重给出解决方案,主要包括:

    1. html、js、css和图片的打包、压缩方法
    2. 多页面入口的正确打包结构及注意事项
    3. 多页面入口babel/polyfill引用方式
    4. 开发与调试配置文件差异

    我希望给遇到同样问题的读者一些技术上的建议和帮助,从而少走弯路。文末会给出配置文件的完整代码,请读者耐心阅读,也希望指出笔者存在的问题,提出宝贵的建议。下面我将循序渐进地分享我的经验。😉

    2. 什么是Webpack?

    随着ECMAScript的版本不断迭代,node.js的不断推广,大页面被切分为小模块,一个js文件引用了多个js文件,很多的开源js库也可以通过下载,被引用到自己的工程中。这样的作法是有利于开发者的:将功能一致的代码提取到独立的文件中,既减少了每个文件的体积,降低开发难度,提高代码组织清晰度,又提高了代码的复用性。但是这么深的文件结构以及无数的小文件并不利于浏览器加载,因此,将多个模块和依赖合并为一个文件,简化网页工程的结构,这是webpack的基本能力。

    在此基础之上,结合编译和压缩相关的库,webpack还可以编译js文件以及压缩网页、脚本、样式以及图片文件。从而得到浏览器可以直接使用的打包后的工程。
    webpack官网首页

    3. 基本安装

    在确保node.js安装好的前提下,首先创建项目目录文件夹webpack-demo

    mkdir webpack-demo && cd webpack-demo
    

    安装webpack4.0以上版本,安装完成后,当前目录下会出现node_modules文件夹和package-lock.json。

    npm install --save-dev webpack webpack-cli
    

    创建和初始化package.json文件

    npm init -y
    

    初始化后的package.json文件结构如下:

    {
      "name": "webpack-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "dependencies": {
        "webpack-cli": "^3.3.2",
        "webpack": "^4.33.0"
      },
      "devDependencies": {},
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    

    这里我给这个json添加以下代码,防止意外发布私有库:

    {
    ...
    "private":true,
    ...
    }
    

    对于package.json的详细介绍可以参考这篇文章mujiang.info
    这样,webpack环境就基本配好。接下来我直接介绍多文件打包的流程。👽

    4. 多文件基本结构

    |–node_modules
    package.json
    package-lock.json
    |–dist
       |–img
       |–css
       |–js
       index.html
       second.html
    |–src
       |–img
       |–css
       |–js
       index.html
       second.html

    PS:/dist:打包后的文件夹; /src:打包前的文件夹

    该文件目录只是多文件结构的一种,当然也可以一个页面做一个文件夹,然后下面包含/img、/css等资源文件。本文以该结构进行讲解。

    5. 打包配置文件

    5.1. 创建配置文件

    打包配置文件是webpack的特点之一,webpack根据配置文件的设定对文件夹进行打包。通常我们会在根目录直接创建一个名为webpack.config.js的配置文件,这也是webpack默认的配置文件位置。但是其实是可以灵活调整的。这里我直接创建两个配置文件,一个用于调试(webpack.config.dev.js),一个用于发布(webpack.config.build.js)。

    我在根目录创建一个名为config的文件夹,然后创建上述两个配置文件,文件结构变为:

    |–config
       webpack.config.dev.js
       webpack.config.build.js

    我先对用于开发的配置文件进行介绍。

    5.2. webpack.config.dev.js配置文件

    基本内容如下:

    const webpack = require('webpack');
    const path = require('path');
    
    module.exports = {
    	mode:"development",
    	entry:{...},
    	output:{...},
    	module:{...},
    	plugins:[...],
    	...
    }
    

    各参数含义如下表:

    参数含义
    mode可以选"development"或"production",前者表示开发模式,不压缩;后者表示生产模式,会对js文件进行压缩。
    entry打包入口,通常为某个js文件
    output打包输出路径
    module打包规则,不同后缀的文件用不同的包来处理
    plugins实现一些功能用到的插件

    下面对各参数详细讲解。

    5.2.1. entry

    entry可以定义多个入口,格式如下:

    entry:{
    	name1:'./src/js/name1.js',
    	name2:'./src/js/name2.js',
    	...
    }
    

    PS:name1为别名,‘src/js/name1.js’为入口js文件的路径,该路径是以根目录为当前目录,注意’src’前面不能少掉’./’,否则打包会报错找不到该文件。

    对于上述文件结构,每个html都会对应一个js入口文件,比如index.html引用了index.js,first.js作为入口引用了其他的文件。同理,second.html引用了second.js作为入口文件,那么entry可以写为:

    entry:{
    	index:'./src/js/first.js',
    	second:'./src/js/second.js',
    }
    

    这样就会打包这两个js。

    5.2.2. output

    output基本设置如下:

    output: {
    	filename: 'js/[name].js',
    	path: path.resolve(__dirname, '../dist'),
    }
    

    PS:需要注意的地方有两点

    1. path的当前目录是webpack.config.js的当前目录,即/config,而/dist与/config是平行关系,因此写的是’…/dist’。
    2. filename是打包后的文件名,是相对于path。name是entry中的别名,'js/[name].js’表明打包后的位置是/dist/js/[name].js。
    5.2.3. module

    module基本结构如下:

    module:{
    	rules:[
    		{
    			test:正则表达式,
    			use:[对应的loader]
    		}
    	]
    }
    

    module的作用是匹配不同类型的文件,用不同的包进行处理和解析。这里就涉及到文件的压缩问题。html、js、css和图片的打包策略都不同,我将在后面的章节中详细介绍。

    5.2.4. plugins

    plugins是为了更方便打包,实现了某些功能的接口。我将在后面实现具体功能时穿插plugins的配置方法。

    5.3. webpack.config.build.js配置文件

    发布的版本和调试用的版本有很大的区别,主要差异在于文件的体积小很多。这里就引出第六章压缩文件的话题。

    6. 压缩文件

    网页是由许许多多资源文件组成的,包括网页文件(.html)、脚本文件(.js)、样式文件(.css)、以及图片文件(.jpg、.png)等等。当浏览器打开这些网页时,本质上是从服务器上下载这些资源文件到浏览器上,再通过浏览器对这些文件进行解析,渲染成我们所看到的各式各样的网页。既然是从服务器上下载,在不影响效果的前提下,我们都希望文件越小越好,因为这样下载的时间更短,用户体验就会提高。压缩文件的方式最简单的就是将文件中的换行和空格去掉,而压缩不同类型的文件用到的库页不同,下面介绍对于四种资源文件的压缩打包配置方式。

    6.1. 压缩html

    通常打包的js,与html是没有对应关系的,即独立打包,之后在html中对打包后的js进行引用。但其实通过插件,html和js是可以联系起来的。这里用到了html-webpack-plugin包,安装方式如下:

    npm install --save-dev html-webpack-plugin
    

    安装后,在plugins中进行配置:

    const htmlPlugin = require('html-webpack-plugin');
    ...
    plugins:[
    	new htmlPlugin({
        	filename:'index.html',//打包后的文件名
    		minify:{//对html文件进行压缩
    	        removeAttributeQuotes:true, //去掉属性的双引号
    	        removeComments: true,//去掉注释
    	        collapseWhitespace: true,//去掉空白
    	    },
       		chunks:['index'],//每个html只引入对应的js和css
       		inject:true,
    	    hash:true, //避免缓存js。
    	    template:'./src/index.html' //打包html模版的路径和文件名称
    	}),
    	new htmlPlugin({
    		filename:'second.html',
    		minify:{...},
       		chunks:['second'],
       		inject:true,
    	    hash:true, 
    	    template:'./src/second.html'
    	}),
    	...
    ]
    

    PS:关键的几个属性

    1. template:选择要打包的html路径,以根目录为当前目录
    2. chunks:写entry中的入口名称,即对应的js
    3. minify:压缩配置

    根据上述配置,可以进行多个页面(html)的匹配(与js)和压缩。

    6.2. 压缩图片

    图片压缩分为两类,一类是在html中的图片,另一类是在js或者css中的图片。

    需要下载两个库url-loaderhtml-withimg-loader,安装方式如下:

    npm install --save-dev url-loader html-withimg-loader
    

    在module中的配置如下:

    module:{
    	rules:[
    		{//压缩css和js中的图片
    			test:/\.(png|jpg|gif|jpeg)/,//匹配图片文件后缀名
    			use:[{
            		loader:'url-loader',//指定使用的loader和loader的配置参数
            		options:{
                		limit:5*1024,//是把小于5KB的文件打成Base64的格式,写入JS
                		outputPath:'./img/',//打包后的图片放到img文件夹下
                	}
                }]
            },
            {//html配置
            	test: /\.(htm|html)$/i,
            	use:[ 'html-withimg-loader']
            },
            ...
    	]
    }
    

    6.3. 提取和压缩css

    css的提取和压缩实际上用到了不同的包,前者用到extract-text-webpack-pluginstyle-loadercss-loader,后者用到optimize-css-assets-webpack-plugincssnanopostcss-safe-parser,安装方法如下:

    npm install --save-dev extract-text-webpack-plugin style-loader css-loader optimize-css-assets-webpack-plugin cssnano postcss-safe-parser
    

    配置方法如下:

    const extractTextPlugin = require('extract-text-webpack-plugin');
    const indexExtractCss = new extractTextPlugin('css/[name].css');
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    ...
    module:{
    	rules:[
    	{
    		test:/src(\\|\/)css(\\|\/).*\.(css)$/,
    		use:indexExtractCss.extract({
    			fallback:"style-loader",
    			use:[
    			{
    				loader:"css-loader",
    				options:{
    					// importLoaders:1
    					// minimize:true
    				}					
    			},
    			]
    		})
    	},
    	...
    	]
    },
    plugins:[
    indexExtractCss,
    new OptimizeCSSAssetsPlugin({//压缩css
        assetNameRegExp: /(?:first|second)\.css/g,  //需要根据自己打包出来的文件名来写正则匹配,这个配置是我自己的
        cssProcessor: require('cssnano'),
        cssProcessorOptions: {
        	discardComments: { removeAll: true },
        	parser: require('postcss-safe-parser'),
        	autoprefixer: false
        },
        canPrint: true
    }),
    ]
    

    6.4. 压缩和编译js

    webpack高版本对于js的压缩其实非常简单,只需要将配置文件中的mode改为"production"即可。

    js的编译则需要引入babel,为了使用ecmascript最新的标准,需要引入babel/polyfill。安装如下:

    npm install --save-dev @babel/core @babel/polyfill @babel/preset-env babel-loader
    

    使用也很容易,配置如下:

    entry:{
    	index:['@babel/polyfill','./src/js/first.js'],
    	second:['@babel/polyfill','./src/js/second.js'],
    },
    module:{
    	rules:[
    		{
    			test:/\.js$/,
    			exclude: /node_modules/,//排除node_modules文件夹下的js
    			loader:'babel-loader',
    		}
    	]
    },
    ...
    

    另外,在每个入口文件的文件头,引用polyfill。以first.js为例,如下所示:

    import'@babel/polyfill';
    ...
    

    这样就可以使用最新的API来写js代码了。👍

    7. webpack打包路径问题

    css中引用的img,打包后的图像路径是相对于css文件,而js或html中引用的img,打包后是相对于html的路径。为了使得打包后的图像统一放在文件夹dist/img/下,使用publicPath参数。

    配置方法:

    output:{
    	...
    	publicPath:'/'
    },
    ...
    

    这样的效果是将所有打包后的相对路径都替换为绝对路径/,这样无论之后发布的ip和端口怎么变,只要dist是根目录,引用就没问题。当然,如果已知ip和端口不变,也可以直接设置publicPath为’http://ip:port/’,只是这样不够灵活。

    8. 网页调试

    webpack可以很方便的实时打包和调试,需要安装webpack-dev-server,安装方式如下:

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

    在package.json中添加:

    "scripts":{
    	"server": "webpack-dev-server --open --hot --config=config/webpack.config.dev.js"
    }
    

    然后在webpack.config.dev.js中配置:

    module.exports = {
    	...
    	devServer:{
    		contentBase:path.resolve(__dirname,'../dist'),//设置基本目录结构,相对当前文件的路径
        	host:'localhost',//服务器的IP地址,这里先使用loaclhost地址
        	compress:true,//服务端压缩是否开启
        	port:'8888', //配置服务端口号
        },
    }
    

    运行

    npm run server
    

    就会自动在浏览器中打开网页,并且修改js文件会自动刷新网页。💚

    9. 附件

    9.1. webpack.config.dev.js

    const webpack = require('webpack');
    const path = require('path');
    const htmlPlugin = require('html-webpack-plugin');
    const extractTextPlugin = require('extract-text-webpack-plugin');
    const indexExtractCss = new extractTextPlugin('css/[name].css');
    
    var website = {
    	publicPath:"http://localhost:8888/" //调试
    }
    
    module.exports = {
    	mode: "development",//development or production
    	entry:{
    		index:['@babel/polyfill','./src/js/first.js'],
    		second:['@babel/polyfill','./src/js/second.js'],
    	},
    	output: {
    		filename: 'js/[name].js',
    		path: path.resolve(__dirname, '../dist'),
    		publicPath:website.publicPath
    	},
    	module:{
    		rules:[
    		{
    			test:/\.js$/,
    			exclude: /node_modules/,
    			loader:'babel-loader',
    		},
    		{
    			test:/\.(css)$/,
    			use:indexExtractCss.extract({
    				fallback:"style-loader",
    				use:[
    				{
    					loader:"css-loader",				
    				},
    				]
    			})
    		},
    		{
    			test:/\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名
    			use:[{
            		loader:'url-loader', //指定使用的loader和loader的配置参数
            		options:{
                		limit:5*1024,  //是把小于5KB的文件打成Base64的格式,写入JS
                		outputPath:'./img/'  //打包后的图片放到img文件夹下
                	}
                }]
            },
            {
            	test: /\.(htm|html)$/i,
            	use:[ 'html-withimg-loader']
            }
            ]
        },
        plugins:[
        new htmlPlugin({
        	filename:'index.html',
    		minify:{//对html文件进行压缩
    	        removeAttributeQuotes:true, //removeAttrubuteQuotes是去掉属性的双引号。
    	    },
       		chunks:['index'],//每个html只引入对应的js和css
       		inject:true,
    	    hash:true, //为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
    	    template:'./src/index.html' //打包html模版的路径和文件名称。
    	}),
        new htmlPlugin({
        	filename:'second.html',
    		minify:{//对html文件进行压缩
    	        removeAttributeQuotes:true, //removeAttrubuteQuotes是去掉属性的双引号。
    	    },
    	    chunks:['second'],
    	    inject:true,
    	    hash:true, //为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
    	    template:'./src/second.html' //打包html模版的路径和文件名称。
    	}),
        indexExtractCss,//提取css
        ],
        devServer:{
    		contentBase:path.resolve(__dirname,'../dist'),//设置基本目录结构
        	host:'localhost',//服务器的IP地址,这里先使用loaclhost地址
        	compress:true,//服务端压缩是否开启
        	port:'8888', //配置服务端口号
        },
    };
    

    9.2. webpack.config.build.js

    const webpack = require('webpack');
    const path = require('path');
    const htmlPlugin = require('html-webpack-plugin');
    const extractTextPlugin = require('extract-text-webpack-plugin');
    const indexExtractCss = new extractTextPlugin('css/[name].css');
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    
    var website = {
    	publicPath:"/" 
    }
    
    module.exports = {
    	mode: "production",//development or production
    	entry:{
    		index:['@babel/polyfill','./src/js/first.js'],
    		second:['@babel/polyfill','./src/js/second.js'],
    	},
    	output: {
    		filename: 'js/[name].js',
    		path: path.resolve(__dirname, '../dist'),
    		publicPath:website.publicPath
    	},
    	module:{
    		rules:[
    		{
    			test:/\.js$/,
    			exclude: /node_modules/,
    			loader:'babel-loader',
    		},
    		{
    			test:/\.(css)$/,
    			use:indexExtractCss.extract({
    				fallback:"style-loader",
    				use:[
    				{
    					loader:"css-loader",				
    				},
    				]
    			})
    		},
    		{
    			test:/\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名
    			use:[{
            		loader:'url-loader', //指定使用的loader和loader的配置参数
            		options:{
                		limit:5*1024,  //是把小于5KB的文件打成Base64的格式,写入JS
                		outputPath:'./img/'  //打包后的图片放到img文件夹下
                	}
                }]
            },
            {
            	test: /\.(htm|html)$/i,
            	use:[ 'html-withimg-loader']
            }
            ]
        },
        plugins:[
        new htmlPlugin({
        	filename:'index.html',
    		minify:{//对html文件进行压缩
    	        removeAttributeQuotes:true, //removeAttrubuteQuotes是去掉属性的双引号。
    	    },
       		chunks:['index'],//每个html只引入对应的js和css
       		inject:true,
    	    hash:true, //为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
    	    template:'./src/index.html' //打包html模版的路径和文件名称。
    	}),
        new htmlPlugin({
        	filename:'second.html',
    		minify:{//对html文件进行压缩
    	        removeAttributeQuotes:true, //removeAttrubuteQuotes是去掉属性的双引号。
    	    },
    	    chunks:['second'],
    	    inject:true,
    	    hash:true, //为了开发中js有缓存效果,所以加入hash,这样可以有效避免缓存JS。
    	    template:'./src/second.html' //打包html模版的路径和文件名称。
    	}),
        indexExtractCss,//提取css
        new OptimizeCSSAssetsPlugin({//压缩css
            assetNameRegExp: /(?:index|second)\.css/g,  //需要根据自己打包出来的文件名来写正则匹配这个配置是我自己的
            cssProcessor: require('cssnano'),
            cssProcessorOptions: {
            	discardComments: { removeAll: true },
            	parser: require('postcss-safe-parser'),
            	autoprefixer: false
            },
            canPrint: true
        }),
        ],
    };
    

    9.3. package.json

    {
      "name": "webpack-demo",
      "version": "1.0.0",
      "description": "",
      "private": true,
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "webpack --watch",
        "build": "webpack --config=config/webpack.config.build.js",
        "server": "webpack-dev-server --open --hot --config=config/webpack.config.dev.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.4.3",
        "@babel/polyfill": "^7.4.3",
        "@babel/preset-env": "^7.4.3",
        "babel-loader": "^8.0.5",
        "css-loader": "^2.1.1",
        "cssnano": "^4.1.10",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "file-loader": "^3.0.1",
        "html-webpack-plugin": "^3.2.0",
        "html-withimg-loader": "^0.1.16",
        "optimize-css-assets-webpack-plugin": "^5.0.0",
        "postcss-safe-parser": "^4.0.1",
        "style-loader": "^0.23.1",
        "url-loader": "^1.1.2",
        "vue-multiselect": "^2.1.4",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.1",
        "webpack-dev-server": "^3.3.1"
      },
      "dependencies": {}
    }
    

    9.4. 打包和调试命令

    打包运行

    npm run build
    

    调试运行

    npm run server
    

    10. 结束语

    好久没有写这么长的博文了,写完后只有两个字“舒服”。本文是笔者个人学习和实践所得,如需转载,请注明出处,谢谢!🌱

    展开全文
  • webpack4.0打包总结

    千次阅读 2018-06-04 12:01:52
    1.webpack概念WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。...
  • 使用Vue-cli 创建webpack项目时,模板默认提供dev和build脚本,dev为直接在本地启动服务器,build为打包生产环境,但是有些时候我们如果想打包一个自定义的环境(预演环境)的话,需要我们自定义一个环境,借鉴网上...
  • Webpack打包

    万次阅读 2020-02-21 18:36:50
    模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在是...
  • vue项目如何使用webpack打包代码

    千次阅读 2021-02-23 10:03:12
    ***模块打包机:***它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在...
  • webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:首先会从配置文件和Shell语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数;初始化完成后会调用Compiler的run...
  • webpack打包配置

    2020-07-07 11:28:27
    在网页中会引用那些常见的静态资源? js .js .jsx .coffee .ts(Typescript 类 C#语言) css .css .less .sass .scss images ....ejs .jade .vue[这是我们在webpack定义组件的方式,强烈推荐]
  • Webpack 实践: 前端 SDK 开发(使用 webpack 打包 library) 文章目录Webpack 实践: 前端 SDK 开发(使用 webpack 打包 library)前言正文1.... 目录结构2.2 源代码扩展2.3 webpack.config.js 配置2.4 打包成果2.5 usa
  • webpack打包版本号定义

    千次阅读 2017-11-16 18:01:00
    首先版本号的定义是为了解决缓存的问题 在编译的时候webpack提供了 插件html-webpack-plugin, 本文以时间作为版本号 <!DOCTYPE html> , initial-scale=1, maximum-scale=1"> , responsive, ...
  • webpack4打包传统H5多页面

    千次阅读 2020-08-01 16:52:16
    1. webpack核心概念 入口(entry) 输出(output) loader 插件(plugins) 官方文档: https://www.webpackjs.com/configuration/output/#output-filename 1.1 入口 指定 webpack 由哪个模块作为项目构建的开始....
  • 学习使用webpack打包工具 一、概念 1.什么是webpack 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency ...
  • webpack系列之打包原理

    2021-04-27 10:38:38
    为什么要使用webpack? 如今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法: 模块化,让我们可以把复杂的程序...
  • webpack静态打包工具

    2020-07-25 19:36:05
    webpack 静态打包工具 一、什么是 webpack? 官方的解释:webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency ...
  • webpack打包配置自己的文件目录

    千次阅读 2019-05-13 09:10:06
    2,webpack.prod.conf.js new HtmlWebpackPlugin({ filename: 'inner-dmp/index.html' , template: 'index.html' , inject: true , ... } 复制代码 build后输入的文件目录结构 build里面html文件引入资源...
  • webpack4打包nodejs项目进阶版——多页应用模板 前段时间我写了个打包nodejs项目的文章,点击前往 但是,问题很多。因为之前的项目是个历史遗留项目,重构起来可能会爆炸,当时又比较急所以就写个...
  • webpack打包工具

    2020-11-29 08:39:04
    webpack 是一个流行的 前端项目构造工具(打包工具),可以解决当前web开发中面临的困境。 提供了友好的模块化支持,以及代码压缩混淆,处理js 兼容问题,性能优化等强大的功能 创建列表隔行变色项目 创建项目空白...
  • 如何使用webpack实现模块化打包

    千次阅读 2020-07-23 15:37:39
    最基本的小案例2.1生成案例结构2.2 安装webpack2.3 运行命令打包js模块文件2.4 在index.html中引入打包文件2.5 打开页面尝试3.配置webpack打包过程3.1 enter属性3.2 output属性4.Webpack 工作模式5. 打包结果运行...
  • webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。   2、为什么要...
  • 如何优化webpack打包速度

    千次阅读 2019-02-20 15:53:32
    文章目录前言怎么优化webpack打包速度有些其他方法对webpack的理解对webpack了解哪些webpack打包原理webpack的构建流程参考文章 前言 今天面试遇到了一个问题,先问的是怎么理解webpack的,我答了webpack的主要...
  • webpack

    千次阅读 多人点赞 2019-10-17 21:30:04
    webpack的使用2.1 webpack的安装2.2 webpack的使用2.2.1 项目搭建思路2.2.2 webpack的作用2.3 webpack的配置文件webpack.config.js2.4 自定义配置文件2.5 执行webpack之后发生了什么2.6 配置多个入口...
  • 源码 本文研究的源码地址为:...打包后的代码结构在有些部分也不相同,举个例子: entry 为 String 类型,我们的第一个执行模块(下面注释中可以找到)是这样子: /***...
  • webpack3.12.0 打包工具,初学知识点 1.初始化项目,并且下载webpack 进入项目目录,然后输入: npm init --yes 这个命令执行后,项目汇总会出现一个package.json文件,然后下载webpack: npm install webpack@...
  • 准备工作 1、 #创建webpackStudy目录 ...$npm install webpack webpack-cli webpack-dev-server #将webback命令和webpack-dev-server写入package.json脚本并执行 $npm run build $npm run dev 2、目
  • webpack打包+调试

    千次阅读 2018-10-12 22:55:26
    title: webpack打包+调试 copyright: true categories: 前端 tags: [webpack] password: 本文基于webpack4.20.2,仅讲解webpack打包操作,以及打包好的js文件的调试,一些配置或者和vue整合还是要看其它资料 文章...
  • webpack4.x打包输出目录分文件夹 优化前 优化后 通过上面的优化前后对比,明显发现优化后的输出结构更加清晰;并且当我更新一个应用时,可以只发送对应的打包文件夹以及入口文件,减少发包体积;同时,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,139
精华内容 4,855
关键字:

webpack定义打包结构