资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/WEBPACK 入门

WEBPACK 入门

mikasa / 1114人阅读

摘要：入门什么是官网介绍是一个模块打包器。处理带有依赖关系的模块，生成一系列表示这些模块的静态资源。。我们在当前项目根目录下新建一个文件，为命令配置选项。引入生成的在浏览器中打开。我们刷新页面，可以发现页面发生了变化。

webpack 入门 1. 什么是webpack

官网介绍：webpack是一个模块打包器。webpack 处理带有依赖关系的模块，生成一系列表示这些模块的静态资源。(webpack is a module bundler.webpack takes modules with dependencies and generates static assets representing those modules.)。

webpack会把各种资源(js,png,css,less,等等)都作为模块来使用和处理,最后转化成一系列的静态资源。

webpack都是怎么处理这些静态资源的呢？

webpack提供了一系列的模块加载器（loader）来编译这些模块。比如处理less文件，webpack提供了less-loader将less文件处理成css，然后再通过css-loader加载成css模块，最后由style-loader加载器对其做最后的处理,等等。当然，你还可以定制自己的加载器处理自己的特需需求。

2. 为什么使用webpack

对于单页应用来说，随着项目的发展，在一个页面中的javascript代码会越来越多，引入的js库会越来越多，这时候就需要把javascript代码模块化，这样才能便于管理和后期的维护。对于一个新项目来说,推荐使用Commonjs规范来编写代码，但是webpack为了兼容以前的旧代码，又同时支持CMD和AMD规范。

对于使用react开发项目的团队来说，webpack是必不可少的react开发神器。webpack中的react-hot-loader插件可以轻松实现react中模块组件的热替换，无刷新页面就可以实时查看页面所做的修改。有这样的功能，谁还会拒绝使用webpack呢？

3. 使用webpack 
npm install webpack -g

安装成功后执行webpack -V 命令行会输出webpack的版本后和webpack全部的options（选项）。

我们在当前项目根目录下新建一个webpack.config.js文件，为webpack命令配置选项。当然你还可以通过命令行的方式来配置，但是那样太麻烦，每次执行都要敲一大堆命令，想想没人会这么干。

一个简单的webpack配置如下所示:

    var webpack = require("webpack");
    var path = require("path");

    module.exports = {
        entry: "./src/main.js", //入口文件,webpack会从入口文件出开始查找依赖递归进行打包
        output: {
            path: path.join(__dirname, "www"),　　//打包后的文件位置
            filename: "js/bundle.js",　　//打包后的文件名
        },
        module: {
        loaders: [　　//配置模块加载器,数组形式
            { test: /.(js|jsx)$/, loaders: ["babel?presets[]=react,presets[]=es2015"] },//babel加载器用于将es6转化成es5,使用前请先安装babel-loader再引入加载器
            ],
        }
    };

在src下创建一个main.js作为入口文件：

在main.js写入以下内容:

    document.write("study webpack!");

保存文件，在项目根目录下执行webpack命令后就会在www/js目录下生产打包后的bundle.js文件

然后我们在www目录下的index.html文件中直接用script标签引入这个生成的bundle.js就ok了。




   
   Title

在浏览器中打开index.html。
可以看到页面出现了main.js中我们要打印的内容：

4. 安装webpack开发服务器(webpackd-dev-server)

webpack不仅提供了模块打包功能,还为开发者提供了一个开发服务器,这个开发服务器会监听文件中的每一个改动,文件改动会触发浏览器自动刷新页面,实时查看自己代码中的修改。执行下面命令作为依赖安装webpack-dev-server:

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

在webpack.config.js同级目录下,新建一个server.js,配置webpack-dev-server参数。为了使热替换生效必须在以下三个位置配置信息：

在server.js中设置hot:true参数

在webpack.config.js的entry中加入"webpack/hot/dev-server

在webpack.config.js的plugins中加入HotModuleReplacementPlugin

具体配置信息如下：

server.js配置:

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.config.js");
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,　　//开启热调试
    historyApiFallback: true
}).listen(3000, "127.0.0.1", function (err, result) {
    if (err) {
        console.log(err);
    }
    console.log("server start");
});

webpack.config.js也要做修改:

var path = require("path");
var webpack = require("webpack");

module.exports = (function( ) {
    var config = {
        entry: [
            "webpack-dev-server/client?http://127.0.0.1:8000",
            "webpack/hot/dev-server",
            "./src/main.js"
        ],
        output: {
            path: path.join(__dirname, "www"),
            filename: "js/bundle.js",
            publicPath: "/www/"
        },
        module: {
            loaders: [
            ],
        }
    };

    config.plugins = [
        new webpack.NoErrorsPlugin(), //允许错误不打断程序
        new webpack.HotModuleReplacementPlugin(),　　//webpack热替换插件
    ];


    return config;

})();

修改main.js中的内容:

document.write("study webpack by webpack-dev-server);

修改过后执行如下命令:

node server.js

当在命令行看到

webpack: bundle is now VALID.

说明打包成功。我们刷新页面，可以发现页面发生了变化。

并且控制台出现了两条语句

HMR前缀的信息由webpack/hot/dev-server模块产生，WDS前缀的信息由webpack-dev-server客户端产生。（Messages prefixed with [HMR] originate from the webpack/hot/dev-server module. Messages prefixed with [WDS] originate from the webpack-dev-server client.）

我们可以发现在www/js/目录下并没有产生bundle.js,因为通过webpack-dev-server打包出来的文件并没有实质性的生成存储在磁盘中,而是生成保存在内存中。每次执行node server.js 太繁琐,我们可以在package.json中为这条命令另起别名:

这样我们每次只要执行npm start就可以启动webpack-dev-server了。

原文作者来自MaxLeap 团队_cloud成员：zhiyingzzhou
原文链接：https://blog.maxleap.cn/archives/727

欢迎关注微信订阅号：从移动到云端
欢迎加入我们的MaxLeap活动qq群：555973817，我们将不定期做技术分享活动。

云服务器 GPU云服务器 webpack入门 webpack _webpack webpack cdn

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

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

相关文章

  • webpack -> vue Component 从入门到放弃（一）

    摘要：本身也是运行在环境中的模块，它通常会返回一个函数。这个命名规则和搜索优先级顺序在的中定义。那就等下一篇介绍吧，一篇文章有太多内容，会让人很乏的从入门到放弃四从入门到放弃二从入门到放弃三源代码 此篇文章仅仅是整理自己接触webpack的入门过程，可能有很多不正确的地方，希望大家谅解，并指出错误帮助改进。 对于webpack的介绍和前期对他的入门使用，我觉得官方（中文网）已经介绍的很简单了...

    Ashin 评论0 收藏0

  • webpack入门学习手记（一）

    摘要：争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。待续相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四 本人微信公众号：前端修炼之路，欢迎关注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用过gulp、grunt，但是一直没有学习过webpack。这两天刚好有时间，学习了下...

    mengera88 评论0 收藏0

  • webpack -> vue Component 从入门到放弃（三）

    摘要：离上一篇已经一个星期了，人的拖延症是没法救的，今晚趁着蒙蒙春雨，来抒发抒发情感。插件的使用一般是在的配置信息选项中指定。本身内置了一些常用的插件，还可以通过安装第三方插件。从入门到放弃四从入门到放弃二从入门到放弃一源代码 离上一篇已经一个星期了，人的拖延症是没法救的，今晚趁着蒙蒙春雨，来抒发抒发情感。上一篇简单介绍了webpack的配置，这里稍微再做一一下延伸 插件 插件可以完成更多 ...

    array_huang 评论0 收藏0

  • webpack 实践笔记（一）--- 入门

    摘要：实践笔记入门一官网文档地址实践工程地址本篇文章可切换到分支查看源代码。简单分步实践创建一个空文件夹，进入全局安装创建文件创建执行命令这个时候项目中多了一个文件，使用标签将其引入到中在浏览器中打开文件，页面出现文字。 webpack 实践笔记入门（一） [webpack官网文档地址]:（http://webpack.github.io/docs...） [实践工程地址]: (https:...

    bergwhite 评论0 收藏0

  • webpack -> vue Component 从入门到放弃（二）

    摘要：我们可以根据模块类型扩展名来自动绑定需要的。当需要加载的文件匹配的正则时，就会调用后面的对文件进行处理，这正是强大的原因。这篇就这样吧，感觉进度有点慢从入门到放弃四从入门到放弃一从入门到放弃三源代码 Foreword 上一篇简单介绍了webpack的打包功能，应该说是比较无意义的打包，对于开发人员来说，这种效率是非常低的。所以我们来点升华。 First Step 我们给第一篇例子中加个...

    DobbyKim 评论0 收藏0

  • webpack -> vue Component 从入门到放弃（二）

    摘要：我们可以根据模块类型扩展名来自动绑定需要的。当需要加载的文件匹配的正则时，就会调用后面的对文件进行处理，这正是强大的原因。这篇就这样吧，感觉进度有点慢从入门到放弃四从入门到放弃一从入门到放弃三源代码 Foreword 上一篇简单介绍了webpack的打包功能，应该说是比较无意义的打包，对于开发人员来说，这种效率是非常低的。所以我们来点升华。 First Step 我们给第一篇例子中加个...

    xiaochao 评论0 收藏0

发表评论

登陆后可评论

0条评论

mikasa

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<