webpack基础运用

2019年8月25日 200次阅读 来源: 三井寿

个人打仗前端并非良久，关于webpack倒是久仰大名，也难怪， 作为一款优异的模块加载器兼打包东西，webpack最近风头可谓一时无二，本身也想着进修并愿望能够相识其事情方式和理念，抛开跟风不谈，最少进修新的手艺对本身是大有裨益的。

《webpack基础运用》

援用一张webpack官网的图片，作为一款模块打包器，webpack担任剖析模块间的依靠关联，随行将模块根据差别的加载器划定规矩天生相对应的资本。我们须要模块化东西为我们做的，包含初始加载量少，按需加载，自定义打包逻辑等功用功用，webpack都能够满足，它的loader加载器能够将各种类型的资本转换成我们所须要的模块，其雄厚的插件体系也让我们自定义需求。

装置

//node 环境自没必要多说
//全局装置webpack
npm install -g webpack
//进入项目目次
//天生package.json
npm init
//装置webpack依靠
npm install webpack --save-dev

基础运用

//静态页面：index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>webpack</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" ></script>
    </body>
</html>
//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的事情道理或者是其相干的周边生态，道阻且长，也愿望本身能够不停的进修新的手艺，将来能够用于项目中，更深的体味其道理跟玄妙。

    原文作者：三井寿
    原文地址: https://segmentfault.com/a/1190000010339290
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞