webpack基本使用

wh469012917 发布于2019-08-20 18:17 / 2568人阅读

摘要：个人接触前端并不是很久，对于却是久仰大名，也难怪，作为一款优秀的模块加载器兼打包工具，近来风头可谓一时无二，自己也想着学习并希望能够了解其工作方式和理念，抛开跟风不谈，至少学习新的技术对自己是大有裨益的。

个人接触前端并不是很久，对于webpack却是久仰大名，也难怪，作为一款优秀的模块加载器兼打包工具，webpack近来风头可谓一时无二，自己也想着学习并希望能够了解其工作方式和理念，抛开跟风不谈，至少学习新的技术对自己是大有裨益的。

引用一张webpack官网的图片，作为一款模块打包器，webpack负责分析模块间的依赖关系，随即将模块按照不同的加载器规则生成相对应的资源。我们需要模块化工具为我们做的，包括初始加载量少，按需加载，自定义打包逻辑等功能功能，webpack都能够满足，它的loader加载器可以将各种类型的资源转换成我们所需要的模块，其丰富的插件系统也让我们自定义需求。

安装

//node 环境自不必多说
//全局安装webpack
npm install -g webpack
//进入项目目录
//生成package.json
npm init
//安装webpack依赖
npm install webpack --save-dev

基本使用

//静态页面：index.html


    
        
        webpack

//JS文件入口：entry.js
document.write("Hello world. ")

编译 entry.js 并打包到 bundle.js,于命令行输入

webpack entry.js bundle.js

随即你会看到命令行会显示日志，提示你打包成功，打开浏览器运行index.html，你会看到Hello world.

配置

var webpack=require("webpack");
module.exports={
    //页面入口设置
    entry:"./entry.js",
    //入口文件输出配置
    output:{
        path:__dirname,
        filename:"bundle.js"
    },
    module:{
        //加载器配置
        loaders:[
          //加载器可以使用简称例如style,其具体规则可见webpack的resolveLoader.moduleTemplates api
          //.css 文件使用style-loader和css-loader加载器来处理
          { test: /.css$/, loader: "style-loader!css-loader" },
           //图片文件使用url-loader加载器来处理，小于8kb的话则转换成base64
          { test: /.(png|jpg)$/, loader: "url-loader?limit=8192"}
        ]
    },
    //插件项配置
    plugins:[
         //为bundle.js头部添加注释信息     
        new webpack.BannerPlugin("this file is created by cala")
    ]
}

webpack.config.js配置基本上存在于每一个使用webpack项目中，作为一个配置项，告诉webpack它的具体功能，包括加载器作用与插件项的功能，所有的加载器都是通过npm来加载，可以阅读相应的文档来了解不同加载器所提供的功能。

执行

webpack --watch

启动监听模式，如此便可以避免在每次修改模块后都重新编译，开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译

npm install webpack-dev-server -g

使用webpack-dev-server构建本地服务器，在浏览器输入localhost：8080会以监听模式自动运行webpack

关于webpack还有很多令人惊奇的地方，看官方文档可以知道很多关于webpack的工作原理或者是其相关的周边生态，道阻且长，也希望自己能够不断的学习新的技术，未来能够用于项目中，更深的体会其原理跟奥妙。

海外云主机服务器托管 webpack使用 webpack 使用公用cdn python基本使用 linux基本使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84290.html

Webpack基本功能理解以及使用

摘要：在这个过程中，会用到一些解析工具用来预处理一些模块以及拓展语言例如这些工具的配置使用都是在中完成的。属性，表示进行转换时，应该使用哪个。插件接口功能极其强大，可以用来处理各种各样的任务。对于前端工程化，webpack一个神奇的工具，既然是个神奇的工具。那我们保留我们的好奇心，来聊一聊它，首先我们要搞清楚webpack到底是用来解决什么问题的，然后我们来看看它到底是怎么做的，最后来看看...

KnewOne 2019-08-26 10:09 评论0 收藏0
webpack 项目构建：（一）基本架构搭建

摘要：在下一个章节，我们会配合搭建一个可以用最新语法开发的平台项目构建二编译环境搭建。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。一、准备工作安装最新的 Node.js 环境；（官网地址：https://nodejs.org/zh-cn/）安装 cnpm 淘宝npm镜像；（在控制台执行命令：npm install -g cnpm --r...

voidking 2019-08-22 15:03 评论0 收藏0
文章3：webpack（3）

摘要：中的会自动的替换中的，也即最后生成的文件叫做。基础路径后面介绍。都需要依赖模块，我也装啦。我将完整的复制一份，当我在打开的时候，它又让我重新在装，以及，后来我全局安装。备注：说明（第一次写的文章还没有写好就提交啦，这里我接着上篇文章继续写））上编文章说道安装webpack的顺序不能改变下面继续：一：webpack的目录结构附上本人webpackdemo01的代码下面介...

RyanQ 2019-08-26 12:25 评论0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：还可以用作文件加载使用，详细请看。实用命令除了简单运行，还可以添加几个参数，方便部署文件处理。以上仅仅介绍了前端开发最基本的用法，更多参数以及功能使用，参考官网作者：Jogis原文链接：https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

roadtogeek 2019-08-21 10:47 评论0 收藏0
前端webpack workflow（二）——Webpack基本使用

摘要：还可以用作文件加载使用，详细请看。实用命令除了简单运行，还可以添加几个参数，方便部署文件处理。以上仅仅介绍了前端开发最基本的用法，更多参数以及功能使用，参考官网作者：Jogis原文链接：https://github.com/yesvods/Blog/issues/3转载请注明原文链接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

LeexMuller 2019-08-28 18:22 评论0 收藏0