webpack 2 实践系列（一） — 安装与入门

niceforbear 发布于2019-08-21 11:16 / 1589人阅读

摘要：全局安装安装成功之后，现在命令就在全局生效。为了将依赖关系与捆绑到一起，我们需要导入。执行命令，入口文件为，输出文件，其中未使用的依赖关系不会打入中。现在我们直接运行命令实现与上面相同的功能。

源码地址：https://github.com/silence717/webpack2-demos

webpack在你的应用中是一个模块打包工具。webpack可以简化工作流，快速构建一个应用程序的依赖关系图，按照它们正确的顺序绑定。webpack可以配置定制优化你的代码，拆分vendor/css/js代码用于生产环境，运行一个可以及时部署代码并且页面无刷新的开发服务器，还有许多很酷的功能。

安装webpack

开始之前首先你得在本地安装一个新版的nodejs。这是一个比较好的基础。老版本你可能会遇到各种与webpack相关的功能丢失或者缺少一些依赖的包。

全局安装

npm install webpack -g

安装成功之后，现在webpack命令就在全局生效。
然而，这不是一个最佳实践，因为它会锁定到一个特定版本的webpack,你在项目中使用不同版本的可能会失效。

本地安装

npm install webpack --save-dev
npm install webpack@ --save-dev

这是一种比较推荐的方法。
如果你想运行本地安装的webpack,你可以进入它的bin里面，就像这样 node_modules/.bin/webpack

极端的方式

如果你对使用最新的webpack有极大的热情(注意 - 可能是不稳定的)，你可以直接安装webpack库使用。

npm install webpack/webpack#

Creating a bundle

创建一个demo目录去实践webpack.

mkdir webpack2-demo && cd webpack2-demo
mkdir demo01-getting-started && cd demo01-getting-started
npm init -y
npm install --save-dev webpack
npm install --save lodash

现在我们创建一个index.js文件
getting-started/src/index.js

function component () {
  var element = document.createElement("div");

  /* lodash is required for the next line to work */
  element.innerHTML = _.map(["Hello","webpack"], function(item){
    return item + " ";
  });

  return element;
}

document.body.appendChild(component());

为了运行这段代码，我们创建一个一个html
index.html


  
    Webpack demo

在这栗子中，使用 script 标签引入依赖。
index.js依赖lodash，所以最最开始引入它。这个里面并没有很直接的表明index.js依赖lodash库，只是使用了lodash的变量 _。

这种管理javascript项目会存在一些问题：

如果一个依赖丢失，或者没有按照正确的顺序去引入，应用将不会工作。

如果一个依赖被引入了，但是从未使用，浏览器就需要加载根本不需要的大段代码。

为了将lodash依赖关系与index.js捆绑到一起，我们需要导入lodash。

+ import _ from "lodash";

function component () {
  ...

同样我们需要改变index.html文件只包含一个bundlejs文件。


  
    Webpack demo
-   
-   
  
  
+

现在index.js明确表明依赖lodash，并且将其绑定到_，再也不会产生全局命名污染。

执行webpack命令，入口文件为index.js，输出bundle.js文件，其中未使用的依赖关系不会打入bundle.js中。

webpack src/index.js dist/bundle.js
// 输出
Hash: 73259977daef4d7ca66c
Version: webpack 2.1.0-beta.28
Time: 558ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./src/index.js 371 bytes {0} [built]

用一个配置文件来使用webpack

webpack.config.js

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

使用webpack运行这个文件：

webpack --config webpack.config.js
// 输出
Hash: 54fb380c0318be007543
Version: webpack 2.1.0-beta.28
Time: 562ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  543 kB       0  [emitted]  [big]  main
   [3] ./src/index.js 371 bytes {0} [built]

如果webpack.config.js已经存在，webpack命令会默认选择它
配置文件能够灵活使用webpack,添加loaders,插件，解析选项和许多其他增强功能。

在npm中使用Webpack

我们在package.json中设置一个快捷方式，运行webpack。

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

现在我们直接运行npm run build命令实现与上面相同的功能。

总结

在这个栗子中，我们了解了webpack的基本概念和配置，之后我们将按照API进一步深入学习Webpack。

PS：本文完全属于边实践学习边写，会不断更新，希望不对的地方可以及时指出。

超融合服务器专线服务 webpack入门入门系列课程 ecs系列2 深度学习入门系列课程

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

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

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

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

bergwhite 2019-08-20 11:03 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0