webpack安装 简单易懂

最新推荐文章于 2023-03-17 09:57:49 发布
最新推荐文章于 2023-03-17 09:57:49 发布
阅读量566 收藏
点赞数
分类专栏： 模块化 文章标签： webpack安装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shimeng_1989/article/details/76650806
版权

webpack

此文档使用webpack版本为 3.4.1，在你自行测试中，可能输出结果与文档中所贴出内容不一致，请以你自己的代码为准

安装

本地安装

npm install –save-dev webpack 或 npm install –save-dev webpack@[version]

全局安装

npm install -g webpack

不推荐使用全局方式安装，将会影响项目中所使用的webpack版本

起步

使用CLI（命令行）

创建一个目录，并初始化package.json

   mkdir webpack-test && cd webpack-test
    npm init
    npm install --save-dev webpack

构建基本目录及文件（ / 代表目录）

webpack-test
    -- /dist
        -- index.html
    -- package.json
    -- /src
        -- index.js

编辑index.js文件

    function fun(){
        document.write("Hello Webpack");
    }
    fun();

编辑index.html文件

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="UTF-8">
        </head>
        <body>

        </body>
        <script src='bundle.js' charset='utf-8'></script>
    </html>

在终端（工作目录为当前项目目录），输入webpack src/index.js dist/bundle.js，并回车。

在你的终端应该会出现以下类似内容：（内容也许会有差异）

 λ webpack src/index.js dist/bundle.js
    Hash: 0f97cc36123f295c9fd2
    Version: webpack 3.4.1
    Time: 260ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  36.9 kB       0  [emitted]  main
       [0] ./src/index.js 84 bytes {0} [built]
       [1] multi ./src/index.js ./src/index.js ./dist/bundle.js 52 bytes {0} [built]
       [2] ./src/index.css 1.08 kB {0} [built]
       [3] ./node_modules/_css-loader@0.28.4@css-loader!./src/index.css 237 bytes {0} [built]
       [7] ./dist/bundle.js 18.4 kB {0} [built]
        + 3 hidden modules

运行index.html，可以看到页面中的Hello Webpack。

使用配置文件

创建webpack.config.js文件

  module.exports = {
        entry : "./src/index.js",
        output : {
            filename : "bundle.js",
            path : __dirname+"/dist"
        }
    };

在终端输入webpack –config webpack.config.js 或者直接输入webpack，并回车

     webpack --config webpack.config.js
    Hash: e2e4b7042538facd73f0
    Version: webpack 3.4.1
    Time: 216ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  18.4 kB       0  [emitted]  main
       [0] ./src/index.js 84 bytes {0} [built]
       [1] ./src/index.css 1.08 kB {0} [built]
       [2] ./node_modules/_css-loader@0.28.4@css-loader!./src/index.css 237 bytes {0} [built]
        + 3 hidden modules

使用npm

修改package.json文件中

    {
    ...
    "scripts": {
        "build": "webpack"
     },
    ...
    }

在终端运行npm run build

使用source map

跟踪代码错误

修改webpack.config.js

  //...省略
    module.exports = {
        devtool : "inline-source-map",
        //...省略
    }

修改index.js文件，故意生成一个错误

  import "./index.css";
    import wicon from "./webpack.png";
    function fun(){
        console.log(a);
       //...省略
    }

重新构建，刷新页面，在控制台可以看到如下错误

 Uncaught ReferenceError: a is not defined
        at fun (index.js:4)
        at Object.<anonymous> (index.js:10)
        at __webpack_require__ (bootstrap 403852e…:19)
        at module.exports (bootstrap 403852e…:62)
        at bootstrap 403852e…:62

可以看到，错误信息及错误所在文件和行数

开发模式

  • 观察模式
    在终端输入 webpack -w 或 webpack –watch
    会发现执行构建后，并没有退出命令，此时正处理观察模式
    可以在package.json的scripts配置项中增加如下内容
   "scripts": {
          "watch" : "webpack --watch"
        },

终端运行npm run watch 也能得到相同的效果

  • webpack-dev-server 即时刷新

    安装

    npm install –save-dev webpack-dev-server
    修改webpack.config.js

   devServer : {
        contentBase : "./dist"
      }

在终端输入 webpack-dev-server 或 在package.json的scripts配置项中增加如下内容并使用npm run dev：

   "scripts": {
          "watch": "webpack --watch",
          "dev": "webpack-dev-server --open"
        },

会发现会自动打开浏览器，当有任意一个源文件被修改时，会自动重新刷新页面

热加载模式

修改webpack.config.js

     const webpack = require("webpack");
      //...省略
      plugins : [
        new webpack.HotModuleReplacementPlugin()
      ],
        //...省略

修改package.json的scripts配置项

    "scripts": {
          "watch": "webpack --watch",
          "dev": "webpack-dev-server --open --hot"
        }

即可开启hmr模式。即允许在运行时更新各模块，而无需进行完全刷新

loader

CSS

style-loader css-loader

css-loader用于将css文件做为模块处理，可以使用import 导入

style-loader 将所有处理完成的样式插入到页面的head中

安装

npm install --save-dev style-loader css-loader

修改webpack.config.js

  const path = require("path");
    module.exports = {
        entry : "./src/index.js",
        output : {
            filename : "bundle.js",
            path : path.resolve(__dirname,"dist")
        },
        module : {
            rules : [{
                test : /\.css$/,
                use : ["style-loader","css-loader"]
            }]
        }
    };

在src目录下建立index.css文件

  body{
        font-size : 50px;
        color : red;
    }

修改index.js文件

   import "./index.css";
    //...省略

在终端执行npm run build，刷新页面

less | sass

less-loader sass-loader

安装

npm install --save-dev less less-loader

图片

file-loader

安装

npm install --save-dev file-loader

修改webpack.config.js文件

  //...省略
    module : {
      rules : [{
        test : /\.css$/,
        use : ["style-loader","css-loader"]
      },{
        test : /\.(png|jpg|gif|jpeg)$/,
        use : ["file-loader"]
      }]
    }
    //...省略

修改index.css文件

  .box{
        width: 497px;
        height:270px;
        background: url(./webpack.png)
    }

修改index.html文件

 <body>
       <div class="box"></div>
    </body>

找一张你喜爱的照片拷贝至src目录下，终端运行npm run build， 刷新页面

继续

修改index.js文件

  import "./index.css";
    import wicon from "./webpack.png";
    function fun(){
        document.write("Hello Webpack");
        let img = new Image();
        img.src = wicon;
        document.body.appendChild(img);
    }
    fun();

重新执行构建，刷新页面，你可以看到两张图片

JSON数据

JSON数据的加载是内置的，可以通过 import mdata from ‘./data.json’, 即可正常使用

ES6 | JSX

babel-loader

安装 由于babel是几个模块包，对于解析不同的语言需要安装不同的包

常用的有如下：

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
  • babel-core babel的核心包
  • babel-loader bable的Loader
  • babel-preset-es2015 转换ES代码
  • babel-preset-react 转换JSX代码

在src目录新增other.js

    export default function say(){
        console.log("hello!!!");
    }

修改index.js

   import say from "./other.js";
    function fun(){
        say();
       //...省略
    }

修改webpack.config.js

    modules : {
      //...省略
      rules : [
        //...省略
        {
        test : /\.js$/,
          use : [{
            loader : "babel-loader",
            options : {
              presets : ["es2015"]
            }
          }]
      }]
    }
    //...省略

重新构建，观察控制台

多文件入口

在src目录增加home.js

   function fun(){
        console.log("home is output");
    }
    fun();

修改index.html文件

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <title></title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
            <div class="box"></div>
        </body>
        <script src='./app.bundle.js' charset='utf-8'></script>
        <script src='./home.bundle.js' charset='utf-8'></script>
    </html>

修改webpack.config.js

    //...省略
    entry: {
      app : "./src/index.js",
      home : "./src/home.js"
    },
      output: {
        filename: "[name].bundle.js",
          path: __dirname + "/dist"
      },
    //...省略

重新执行构建，并刷新页面，观察控制台

问题：如果修改webpack.config.js中第7行filename一行所输出的文件名称，重新构建，会发现在dist目录会新增新名称的文件，但index.html文件中依然引用的是旧的名字，如何解决？（参见 插件 htmlwebpackplugin）

插件

HtmlWebpackPlugin

自动生成页面

安装

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

修改webpack.config.js

  const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
        entry: {
            //...省略
        },
        output: {
            //...省略
        },
        plugins : [
            new HtmlWebpackPlugin()
        ],
        module: {
            //...省略
        }
    };

重新执行构建，并刷新页面。

观察dist目录下的index.html，发现在测试file-loader时，创建div不见了，上述插件为我们创建一个新的html文件，并自动将output项所指定的filename引入到了页面中

clean-webpack-plugin

清理dist目录

安装

npm install --save-dev clean-webpack-plugin --save-dev

修改webpack.config.js

   const CleanWebpackPlugin = require("clean-webpack-plugin");
    //...省略
    plugins : [
      new HtmlWebpackPlugin(),
      new CleanWebpackPlugin(["dist"])
    ],
    //...省略

重新执行构建，dist目录清静了

Shimeng_1989
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack V4安装使用与常用配置总结
weixin_40870788的博客
06-25 1096
webpack Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 Webpack可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求。 Webpack 的安装 webpack在打包过程中会使用node内置的一些模块。 在安装Webpack前，你本地环境需要支持 node.js...
webpack：简单易懂的webpack入门教程
02-06
在 `webpack-master` 压缩包中，你可以找到一个简单的 Webpack 示例项目，它包含了 `webpack.config.js` 配置文件以及相关的源代码。你可以按照以下步骤进行实践： 1. 安装依赖：`npm install`。 2. 运行开发服务器...
webpack使用小记
andywang821017的博客
04-20 251
前言 webpack是目前前端开发必不可少的一款模块加载器兼构建工具，它能极其方便的处理各种资源的打包和使用， 让前端开发获得与后端开发几乎一致的体验。 webpack特点 webpack 是以 commonJS 的形式来书写脚本的，可以直接使用 require或者import(es6写法，配置babel支持) 的写法来引入各模块 webpack除了支持编译js为...
vue学习笔记 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘
xjcwzp的专栏
07-14 7441
版本：vue3 vue/cli 5.0.0 做写store时报错 import Vue from "vue"; import Vuex from "vuex"; import getters from "./getters"; import user from "./modules/user"; Vue.use(Vuex); const store = new Vuex.Store({ modules: { user, }, getters, }); export defa
集成webpack-dev-server,watch的打包工具使用
高山上的鱼
03-03 4533
该工具目前也在开发完善阶段，建议在github阅读并获取最新开发状态，并欢迎issue,start1.该工具的三种打包模式首先必须说明一下，该工具是基于webpack2的，所以很多配置都是需要遵守webpack2规范的。如果需要安装，直接运行下面的命令就可以了。npm install -g webpackcc//同时必须注意，我们局部安装的优先级要高于全局安装的1.1 webpack-dev-ser
Webpack打包工具学习笔记
Tycho‘s Blog
01-17 1786
前言：Webpack是一款基于node的前端打包工具，它可以将很多静态文件打包起来，自动处理依赖关系后，生成一个.js文件，然后让html来引用，不仅可以做到按需加载，而且可以减少HTTP请求，节约带宽。1.配置与安装在node已经安装完成的前提下，全局安装webpack$ cd d:$ mkdir test && cd test //创建test ，并进入$ npm install -g web
Webpack（通俗易懂介绍）
weixin_43452154的博客
02-16 5771
例如：前端不断的技术更新迭代，为了浏览器更好的兼容到以及项目更好的开发，所有才有需要Webpack来打包代码，本文介绍下，Webpack的定义。在现代社会，前端三大框架浪潮不断推出使用，很多公司最近几年都采取前端框架，方便管理以及代码的简便性，例如vue框架下，组件不断调用，请求也会随之增多，那么就需要Webpack来打包整合资源，减少请求，来增加项目的生命力。
简单易懂的webpack入门
秋扬诺布的笔记本
03-30 1821
简单易懂的webpack入门本文比较初级且详细易懂适合没怎么接触过Webpack，而又对webpack感兴趣的人参考； 最近这些天有几个朋友在刚开始使用webpack中遇到问题，所以想写一篇自己的立即，因为水平有限但是尽力让本文一目了然；nodejs与npmwebpack webpack安装 webpack打包 loader——模块加载器 webpack配置说明 webpack.config.js
webpack简单介绍和使用
qq_44407871的博客
03-17 253
webpack 是一个现代 javascript 应用程序的gulp和grunt是流管理工具，通过一个个task配置执行用户需要的功能grunt配置复杂繁重，是基于文件流的操作，比较慢；gulp是基于内存流的操作，配置轻量级，代码组织简单易懂，异步任务。
webpack基础教学，简单易懂（一）（什么是webpack以及webpack的基本使用）
随便写写
03-16 2001
webpack基础教学，简单易懂（一）（什么是webpack以及webpack的基本使用）
webpack.rar
08-27
从零搭建基于Webpack的React环境,简单易懂
webpack自动化构建项目-配置多入口多页面应用
01-08
从简单的小demo做起，两个页面，通俗易懂 一、准备工作 1、node初始化一个项目 npm init // 接下来的步骤你可以一路的回车 原创文章 7获赞 5访问量 281 关注 私信 展开阅读全文 作者：Heinrich's_Law
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260
最新发布
08-31
常用芯片手册芯片资料MAX260常用芯片手册芯片资料MAX260提取方式是百度网盘分享地址
常用芯片手册芯片资料82530常用芯片手册芯片资料82530
08-31
常用芯片手册芯片资料82530常用芯片手册芯片资料82530提取方式是百度网盘分享地址
全国互联网网民数和互联网普及率.xlsx
08-31
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141286857 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 各省、地级市、区县互联网普及率、宽带接入户数和电话用户数等 1、全国互联网网民数和互联网普及率（1997-2020年）； 2、各省互联网网民数和互联网普及率（1997-2016年）； 3、地级市互联网宽带接入用户（1996-2020年）； 4、各区县电话用户数（2004-2019年）
SQLAlchemy-2.0.30-cp37-cp37m-musllinux_1_1_x86_64.whl
08-31
SQLAlchemy 是一个 SQL 工具包和对象关系映射（ORM）库，用于 Python 编程语言。它提供了一个高级的 SQL 工具和对象关系映射工具，允许开发者以 Python 类和对象的形式操作数据库，而无需编写大量的 SQL 语句。SQLAlchemy 建立在 DBAPI 之上，支持多种数据库后端，如 SQLite, MySQL, PostgreSQL 等。 SQLAlchemy 的核心功能： 对象关系映射（ORM）： SQLAlchemy 允许开发者使用 Python 类来表示数据库表，使用类的实例表示表中的行。 开发者可以定义类之间的关系（如一对多、多对多），SQLAlchemy 会自动处理这些关系在数据库中的映射。 通过 ORM，开发者可以像操作 Python 对象一样操作数据库，这大大简化了数据库操作的复杂性。 表达式语言： SQLAlchemy 提供了一个丰富的 SQL 表达式语言，允许开发者以 Python 表达式的方式编写复杂的 SQL 查询。 表达式语言提供了对 SQL 语句的灵活控制，同时保持了代码的可读性和可维护性。 数据库引擎和连接池： SQLAlchemy 支持多种数据库后端，并且为每种后端提供了对应的数据库引擎。 它还提供了连接池管理功能，以优化数据库连接的创建、使用和释放。 会话管理： SQLAlchemy 使用会话（Session）来管理对象的持久化状态。 会话提供了一个工作单元（unit of work）和身份映射（identity map）的概念，使得对象的状态管理和查询更加高效。 事件系统： SQLAlchemy 提供了一个事件系统，允许开发者在 ORM 的各个生命周期阶段插入自定义的钩子函数。 这使得开发者可以在对象加载、修改、删除等操作时执行额外的逻辑。
百度云/百度网盘Python客户端
08-31
极简说明 安装: pip install bypy 运行: bypy 这是一个百度云/百度网盘的Python客户端。主要的目的就是在Linux环境下（Windows下应该也可用，但没有仔细测试过）通过命令行来使用百度云盘的2TB的巨大空间。比如，你可以用在Raspberry Pi树莓派上。它提供文件列表、下载、上传、比较、向上同步、向下同步，等操作。
2010-2021年省级碳排放和分行业二氧化碳排放数据(全新整理)
08-31
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141286902 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 分行业二氧化碳排放量 数据来源：中国能源统计等 时间范围：1994-2021年 指标：八类能源和总量
webpack安装配置与Vue实战指南
这只是一个简单的示例，实际项目中，webpack会通过配置文件（webpack.config.js）进行更复杂的设置，如加载器（loaders）处理CSS、图片等非JavaScript文件，插件（plugins）实现优化、压缩等功能，以及处理Vue、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值