Webpack2入门

介绍

webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。你能够针对你的代码来对 webpack 进行自定义的优化配置,比如为生产环境拆分 vendor/css/js 代码,无刷新热重载(hot-reload)等.

Webpack可以做什么

  • 处理module依赖关系
  • 打包js,css和png等
  • 降低页面初始加载时间
  • 方便组合第三方组件库
  • 可以转换不同语法成标准语法

安装

这里使用的是 webpack 2.4.1 版本。

# 全局安装
npm install -g webpack

#本地安装
npm install --save-dev webpack

一个小例子

创建应用并安装必要的依赖库

$ mkdir webpack-demo
$ cd webpack-demo
$ npm init -y
$ npm install --save-dev webpack
$ npm install --save-dev css-loader
$ npm install --save-dev style-loader
$ npm install --save-dev extract-text-webpack-plugin
$ npm install webpack-dev-server

入口 (index.js)

import './style.css';
content = require("./content.js")

var element = document.createElement('message');
element.innerHTML = content;
document.body.appendChild(element);

自定义模块 (content.js)

module.exports = "It works from content.js!!!";

css (style.css)

body {
  background: grey;
}

html页面 (index.html)

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
   </body>
</html>

webpack配置

module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }]
    }
};

打包生成 bundle.js文件

$ webpack
Hash: 62f1078175b4dbbd7d46
Version: webpack 2.4.1
Time: 368ms
    Asset     Size  Chunks             Chunk Names
bundle.js  19.1 kB       0  [emitted]  main
   [0] ./content.js 48 bytes {0} [built]
   [1] ./style.css 992 bytes {0} [built]
   [2] ./index.js 171 bytes {0} [built]
   [3] ./~/css-loader!./style.css 192 bytes {0} [built]
   [4] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built]
   [5] ./~/style-loader/addStyles.js 9.15 kB {0} [built]
   [6] ./~/style-loader/fixUrls.js 3.01 kB {0} [built]

运行后可以看到生成一个 bundle.js 文件,其中包含了所有js和css。

在浏览器直接访问 index.html 文件查看结果。

热部署

本地热部署

  • 第一步:启动 webpack $ webpack --watch
  • 第二步:修改代码
  • 第三部:浏览器刷新(访问file:///.../index.html)

服务器热部署

  • 第一步:启动 webpack-dev-server $ webpack-dev-server
  • 第二步:修改代码
  • 第三步:浏览器刷新(访问http://localhost:8000

自动刷新页面

到目前为止,我们的开发每次在修改完js和css之后都需要手动刷新浏览器来查看结果,其实 webpack-dev-server 可以启动成每次修改后自动刷新浏览器,听起来酷酷的,下面就试试吧。使用下面的命令来启动 webpack-dev-server:

$ webpack-dev-server --hot --inline

然后修改 js 或者 css,保存,页面自动刷新了吧。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Electron 使用 Webpack2 打包应用程序

    kongxx
  • Electron 使用 Webpack2 打包多入口应用程序

    kongxx
  • Electron 使用 Webpack2 预编译 Electron 和 Browser targets

    kongxx
  • webpack(4.8.3)总结之一

    前言:webpack4从入门到高阶配置,本文先讲述webpack4的安装、基础配置、进阶配置,高阶配置放置下篇讲述。

    wade
  • webpack(4.8.3)总结

    前言:webpack4从入门到高阶配置,本文先讲述webpack4的安装、基础配置、进阶配置,高阶配置放置下篇讲述。

    wade
  • (9/24) 图片跳坑大战--css分离与图片路径处理

    在上一节当中,我们把小图片打包成Base64格式(打包到了js当中)。我们也算是对webpack对图片的打包有个基本了解。

    wfaceboss
  • webpack

    npm install webpack -g npm init -y npm install webpack --save-dev

    河湾欢儿
  • Webpack(一):安装和基础配置

    之前急着搭建博客,所以 Nodejs 安装好后就没管了,今天 webpack -v 命令死活用不了(提示“webpack 不是内部命令”),才发现是因为当时忘记...

    Chor
  • 前端工程化——Webpack入门使用

    webpack是一个模块加载器兼打包工具,它能够让你非常清晰的把编写模块化的代码,什么编译都交给webpack就好了,当它也能实现简单的打包,比如合并js,压缩...

    前端博客 : alili.tech
  • 前端-手摸手,带你用合理的姿势使用 webpack 4(上)

    前几天 webpack 作者 Tobias Koppers 发布了一篇新的文章:webpack 4.0 to 4.16: Did you know?,总结了一下...

    grain先森

扫码关注云+社区

领取腾讯云代金券