Webpack 学习笔记

Posted усил

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack 学习笔记相关的知识,希望对你有一定的参考价值。

Webpack 笔记

安装 webpack

前置条件安装了 node

  • 全局安装 webpack 及 webpack-cli
    • npm install -g webpack --registry=https://registry.npm.taobao.org
    • npm instal -g webpack-cli --registry=https://registry.npm.taobao.org

快速入门

  • 创建项目并初始化项目
  • 创建并配置 webpack 文件(webpack.config.js)

    // 导入 path 模块 (处理路径)
    var path = require('path');
    
    // module 模块系统对象
    // exports 配置选项
    module.exports = {
        // 入口文件
        entry: "./src/index.js",
        // 设置模式 development(开发模式) production 生产环境
        mode: "development",
        // 输出
        output: {
            /*
              __dirname: 项目的绝对路径
              打包后的文件存放在 dist 目录下
             */
            path: path.resolve(__dirname, "dist"),
            // 设置打包后的文件名称
            filename: "bundle.js"
        }
    }
    

多入口文件时

entry: {

​ index: “./src/index.js”,

​ detail: “./src/detail.js”,

}

  • 入口文件(index.js)

    var rd = function (min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    
    document.write(rd(100, 200)+"<br/>");
    document.write(rd(100, 200)+"<br/>");
    document.write(rd(100, 200)+"<br/>");
    document.write(rd(100, 200)+"<br/>");
    document.write(rd(100, 200)+"<br/>");
    
  • 打包项目

    webpack --config webpack.config.js

开发模式下

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./src/index.js":
/*!**********************!*\\
  !*** ./src/index.js ***!
  \\**********************/
/***/ (() => {

eval("var rd = function (min, max) {\\r\\n    return Math.floor(Math.random() * (max - min) + min);\\r\\n}\\r\\n\\r\\ndocument.write(rd(100, 200)+\\"<br/>\\");\\r\\ndocument.write(rd(100, 200)+\\"<br/>\\");\\r\\ndocument.write(rd(100, 200)+\\"<br/>\\");\\r\\ndocument.write(rd(100, 200)+\\"<br/>\\");\\r\\ndocument.write(rd(100, 200)+\\"<br/>\\");\\r\\n\\n\\n//# sourceURL=webpack://project01/./src/index.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = {};
/******/ 	__webpack_modules__["./src/index.js"]();
/******/ 	
/******/ })()
;

生产模式下

(()=>{var r=function(r,t){return Math.floor(Math.random()*(t-r)+r)};document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>"),document.write(r(100,200)+"<br/>")})();

打包项目也可以使用 npm run build

前提是在项目的 package.json 中配置好选项

打包 CSS 文件

在 src 目录下创建 css 文件(base.css),并在入口文件(index.js)中引入文件

import './base.css'
  • 配置 webpack.config.js
var path = require('path');
module.exports = {
    entry: "./src/index.js",
    mode: "development",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }
    // 配置 loader 模块
    module: {
        rules: [
            {
                // 打包 css 文件
                test: /\\.css$/i,
                use: [
                    "style-loader", 
                    "css-loader"
                ]
            }
        ]
    }
}

配置前需要下载插件 style loader css-loader

npm install --save-dev style-loader

npm install css-loader

  • 打包文件并启动项目

    测试方法:在生产的dist 文件中创建一个 html 文件 并将 bundle.js 引入后,打开该文件,此时可以看到 css 样式是否加载成功

打包 scss

安装 sass-loader sass

npm install sass-loader sass --save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\\.s[ac]ss$/i,
        use: [
          // 3 最后把 javascript 写入到bundle.js
          "style-loader",
          // 2 再把 css 转成 javascript
          "css-loader",
          // 1 将 sass 编译为 css
          "sass-loader",
        ],
      },
    ],
  },
};  

打包图片文件

安装 url-loader

npm install url-loader – save-dev

module.exports = {
  module: {
    rules: [
      {
        test: /\\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

编译ES6语法

安装 babel-loader

npm install -D babel-loader @babel/core @babel/preset-env

D 等价于 save-dev

module: {
  rules: [
    {
      test: /\\.m?js$/,
      // 排除 node_modules 目录下的文件
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ]
        }
      }
    }
  ]
}

处理 html 模板

安装 html-webpack-plugin

npm i -D html-webpack-plugin

// 打包项目所需的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//处理html模板文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//处理dist目录多余的文件(冗余)

// 处理路径的模块
var path = require("path");
// 在模块系统下进行配置
module.exports = {
    // 入口文件 (多文件)
    entry: {
        "index": "./src/index.js",
        "detail": "./src/detail.js"
    },
    //  打包模式 development | production
    mode: "production",
    // 输入设置
    output: {
        // 路径
        path: path.resolve(__dirname, "dist"),
        // 名称
        filename: "js/bundle-[name].js"
    },
    module:{},
    //  配置插件
    plugins: [
        // 处理html模板
        new HtmlWebpackPlugin({
            title: "首页", // 网页标题
            template: "./src/views/index.html",//网页模板
            filename: "index.html",// 文件名称
            chunks:["index"] // 添加的脚本 和entry对象下的key是一一对应!!
        }),
        new HtmlWebpackPlugin({
            title: "详情页",
            template: "./src/views/detail.html",
            filename: "detail.html",
            chunks:["detail"]
        }),
		new CleanWebpackPlugin()
    ]
}

处理模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    <h1>Hello world</h1>
</body>
</html>

完整版

// 打包项目所需的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//处理html模板文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');//处理dist目录多余的文件(冗余)

// 处理路径的模块
var path = require("path");
// 在模块系统下进行配置
module.exports = {
    // 1.0 入口文件 (多文件)
    entry: {
        "index": "./src/index.js",
        "detail": "./src/detail.js"
    },
    // 2.0 打包模式 development | production
    mode: "production",
    // 3.0 输入设置
    output: {
        // 路径
        path: path.resolve(__dirname, "dist"),
        // 名称
        filename: "js/bundle-[name].js"
    },
    // 4.0 配置loader模块
    module: {
        rules: [
            // 打包css文件
            {
                test: /\\.css$/i,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            // 打包scss文件(sass)
            {
                test: /\\.s[ac]ss$/i,
                use: [
                    // 3. 最后把javascript写入到 bundle.js 文件中
                    "style-loader",
                    // 2. 再把css转成 javascript
                    "css-loader",
                    // 1. 将sass编译为css
                    "sass-loader"
                ]
            },
            // 打包图片文件
            {
                test: /\\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 1KB = 1024Bytes  
                            // 如果图片大小限制 小于等于8192Bytes  转base64格式字符串(图片文件)
                            // 如果超过8192Bytes 就是显示原来的图片
                            limit: 8192
                        }
                    }
                ]
            },
            // 编译ES6
            {
                test: /\\.m?js$/,
                // 排除node_modules目录的JS文件
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: "defaults" }]
                        ]
                    }
                }
            }
        ]
    },
    // 5.0 配置插件
    plugins: [
        // 处理html模板
        new HtmlWebpackPlugin({
            title: "首页", // 网页标题
            template: "./src/views/index.html",//网页模板
            filename: "index.html",// 文件名称
            chunks:["index"] // 添加的脚本 和entry对象下的key是一一对应!!
        }),
        new HtmlWebpackPlugin({
            title: "详情页",
            template: "./src/views/detail.html",
            filename: "detail.html",
            chunks:["detail"]
        }),
		new CleanWebpackPlugin()
    ]
}

以上是关于Webpack 学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

webpack 学习笔记

webpack学习笔记--区分环境

webpack学习笔记八

webpack学习笔记

webpackの学习笔记2

webpack学习笔记流行的前端模块化工具webpack初探