查看如何轻松升级到Webpack

by Yazan Aabed

通过Yazan Aabed

查看如何轻松升级到Webpack (See How Easily You Can Upgrade To Webpack)

I’ve written this article to narrate the adventure that happened to me when upgrading an AngularJS project from Grunt to Webpack.

我写这篇文章是为了讲述将AngularJS项目从Grunt升级到Webpack时发生的冒险。

You can follow me on twitter or check my latest articles on my site yaabed.com. Also, I have my publication at medium blog.yaabed.com.

您可以在Twitter上关注我，也可以在我的网站yaabed.com上查看我的最新文章。 另外，我的出版物在中等Blog.yaabed.com上 。

The main problem that existed was about 500 items thrown on the window object. This allows you to access them any place you need. It also makes the window the navigation tool for modules and components. The project becomes more coupled, and you don’t know who is using them.

存在的主要问题是在窗口对象上抛出了大约500个项目。 这使您可以在任何需要的地方访问它们。 它还使窗口成为模块和组件的导航工具。 该项目变得更加紧密，您不知道谁在使用它们。

Files are structured using the module architecture but without using angular.module. Files are divided into folder by name like HomePage. The HomePage folder contains its controller, style, and view.

文件是使用模块体系结构构造的，但不使用angular.module. 文件按名称分成文件夹，例如HomePage。 HomePage文件夹包含其控制器，样式和视图。

The first thing that came to mind was refactoring the whole app to use webpack, modules, babel, and es6. After researching, it is possible to do this without any refactoring of the codebase. But, there are many problems to solve before I start adding webpack to the project.

首先想到的是重构整个应用程序以使用webpack，模块，babel和es6。 在研究之后，无需对代码库进行任何重构就可以做到这一点。 但是，在开始将Webpack添加到项目之前，有许多问题需要解决。

开始工作前要考虑的问题 (Problems to consider before starting to work)

• How to solve the window object problem, because webpack shows files as a tree of files talking to each other.
  如何解决窗口对象问题，因为webpack将文件显示为相互对话的文件树。
• How to make fewer changes to the project without merging issues.
  如何在不合并问题的情况下对项目进行较少的更改。
• How to split between development and production for the webpack.
  如何在Webpack的开发和生产之间进行划分。
• How to remove bower dependencies, because webpack mainly resolves modules from npm.
  由于webpack主要从npm解析模块，因此如何删除Bower依赖性。
• How upgrades to webpack solve the big size of JavaScript files.
  升级到Webpack如何解决JavaScript文件的庞大问题。

开始把事情分解成步骤 (Start to break things into steps)

将节点版本从0.10升级到可用的最新版本 (Upgrade the node version from 0.10 to the latest version available)

Before I started moving to using webpack, I needed to upgrade the Node version that webpack v3 works with. But, Grunt is using deprecated things — so when I updated the Node version, nothing worked! So I started to fix the errors one by one to make sure upgrading was possible.

在开始使用webpack之前，我需要升级webpack v3可以使用的Node版本。 但是，Grunt正在使用不推荐使用的东西-因此，当我更新Node版本时，没有任何效果！ 因此，我开始逐一修复错误，以确保可以升级。

First, an error accrued on old grunt-sass & node-sass. It’s not supported anymore for this version of Node. To fix this, I upgraded grunt-sass from ‘0.18.1’ to ‘2.0.0’, then upgraded node-sass to be ‘4.7.2’.

首先，旧的grunt-sass和node-sass产生了错误。 此版本的Node不再支持。 为了解决这个问题，我将grunt-sass从“ 0.18.1”升级到了“ 2.0.0”，然后将node-sass升级到了“ 4.7.2”。

Secondly, trying to upgrade grunt from ‘0.4.5’ to ‘1.0.0’ didn’t work, because the grunt plugins need grunt@0.4.5 as peer dependency. So I stuck with 0.4.5 version.

其次，尝试将grunt从'0.4.5'升级到'1.0.0'无效，因为grunt插件需要grunt@0.4.5作为对等依赖项。 所以我坚持使用0.4.5版本。

修复Express节点服务器上显示的错误 (Fixing errors shown on express node server)

I had to fix errors with express Node server, because the bodyParser constructor is deprecated and needs to changed. I changed from

我必须修复Express Node服务器的错误，因为bodyParser构造函数已弃用，需要更改。 我从

to

至

删除不赞成使用的东西 (Remove deprecated things)

• Debug attribute from grunt-express because it is deprecated on the node-inspector new version.

  来自grunt-express Debug属性，因为在节点检查器新版本中已弃用该属性。

• Remove the bower-install task from the project.
  从项目中删除bower-install任务。

开始添加webpack (Start adding webpack)

I added webpack to the project using npm install webpack--save-dev. Then I added the `webpack.config.json` file.

我使用npm install webpack--save-dev添加到项目中。 然后我添加了`webpack.config.json`文件。

When I started this step, I got stuck because the project structure has no entry point. The whole project depends on one source which is the window. Webpack needs an entry point to start with and an output point to end with.

当我开始此步骤时，我卡住了，因为项目结构没有入口点。 整个项目取决于一个来源，即窗口。 Webpack需要一个入口点开始和一个输出点结束。

To solve this, I created an entry point. I set all the needed files on it and named it the same name on GruntJS config to concatenate it as the old Build did. But this was going to take a long time, because about 550 items were included in index.html.

为了解决这个问题，我创建了一个入口点。 我在其上设置了所有需要的文件，并在GruntJS config上将其命名为相同的名称，以将其连接起来，就像旧版Build一样。 但这将花费很长时间，因为index.html中包含大约550个项目。

To solve this problem, I used a RegExp /”(.*?)"/ig and replaced the values by require(src)to get the sources from the src attribute and convert it to require(src). I pasted it to the entry.js on the same order as the old index.html.

为了解决这个问题，我使用了RegExp /”(.*?)"/ig并将值替换为require(src)以从src属性获取源并将其转换为require(src). entry.js与旧index.html的顺序相同。

After this, the result was a significant JS file containing all scripts. But nothing worked! After investigating what was happening, it seemed that webpack was working by default as modules. If there are exports or export default on the same file, nothing will be exported to the outside even if you include it using require js.

之后，结果是包含所有脚本的重要JS文件。 但是没有任何效果！ 在调查了正在发生的事情之后，似乎webpack默认作为模块工作。 如果同一文件上有导出或导出默认设置，即使使用require js将其包含在内，也不会将任何内容导出到外部。

Before searching for a way to solve this, I start adding module.exports to all files needing to be exported — before clearly understanding how webpack works! After two days of working, I found that there is something called loaders which solve the problem.

在寻找解决方法之前，我开始将module.exports添加到所有需要导出的文件中-在清楚了解webpack的工作原理之前！ 经过两天的工作，我发现有一种称为加载程序的东西可以解决问题。

By adding this to webpack.config.js, all the files were now available as the old behavior!

通过将其添加到webpack.config.js ，所有文件现在都可以作为旧行为使用！

And everything was now working.

现在一切正常。

下一步 (Next step)

After I made the project works with Grunt, I needed to make sure both webpack and Grunt worked together. So I made tests to make sure I didn’t miss anything.

在使项目与Grunt一起使用之后，我需要确保webpack和Grunt一起工作。 所以我进行了测试，以确保我没有错过任何东西。

To make this happen, I create a new file called inject-HTML.files.json. This file contains all source files to use with usemenPrepare on Grunt and webpack to create the entries as multiple items as arrays taken from the inject-HTML files JSON.

为此，我创建了一个名为inject-HTML.files.json.的新文件inject-HTML.files.json. 该文件包含所有源文件，这些源文件可与Grunt和usemenPrepare上的usemenPrepare一起使用，以将条目创建为多个条目，这些条目作为从inject-HTML文件JSON中获取的数组。

更新旧的Grunt配置文件 (Update the old Grunt config file)

将文件添加到concat (Add files to concat)

检查是否构建了Webpack，然后从配置中删除JS (Check if Webpack builds, then remove the JS from configurations)

添加新的npm脚本 (Add new npm script)

Webpack.config.js文件 (Webpack.config.js file)

Webpack.prod.js文件 (Webpack.prod.js file)

动机 (Motivations)

可维护性和代码质量 (Maintainability and Code Quality)

• Solve the problem with creating files, as the project is growing fast.
  随着项目的快速发展，解决创建文件的问题。
• Solve the problem that there are too many things attached to the window without reason.
  解决窗口无故附着的东西过多的问题。
• Make the codebase easier to understand.
  使代码库更易于理解。

发展效率 (Development Efficiency)

• Bower is now deprecated.
  Bower现在已弃用。
• Can’t use any things on npm packages, because the build process does not provide this.
  不能在npm软件包上使用任何东西，因为构建过程不提供此功能。

性能 (Performance)

• Files sizes are growing bigger every day, so need to introduce a solution to split the code.
  文件的大小每天都在增长，因此需要引入一种解决方案来拆分代码。
• Being able to split files and defer loading until needed saves unnecessary transfer and parsing.
  能够拆分文件并推迟加载直到需要时，可以节省不必要的传输和解析。

代码拆分 (Code splitting)

• After use, webpack Code splitting will be easier to use.
  使用后，webpack代码拆分将更易于使用。
• Split new features into modules-based.
  将新功能拆分为基于模块的功能。

Finally, using the npm packages is a game changer. The goal was to make the codebase easy for other developers. Also, we proved that it’s possible to upgrade your system wisely even if your code base is terrible.

最后，使用npm软件包可以改变游戏规则。 目的是使其他开发人员易于使用代码库。 另外，我们证明即使您的代码库很糟糕，也可以明智地升级您的系统。

Rewriting the whole app is a disaster, because you are potentially wasting years of hard work. Instead, try to make your codebase more readable, maintainable, and modular. When the old code needs refactoring, you can do it step by step.

重写整个应用程序是一场灾难，因为您可能浪费了数年的辛苦工作。 相反，请尝试使您的代码库更具可读性，可维护性和模块化。 当旧代码需要重构时，可以逐步进行。

Don’t get stuck with your old codebase and say you can’t do anything to it. Try to make changes by yourself — live with new things, new updates, and new technologies that will make you happy.

不要卡在旧的代码库中，不要说对它无能为力。 尝试自己进行更改-与新事物，新更新和新技术一起生活，这将使您感到高兴。

This is my first time writing for people! If you liked this article, please share it with other people around you.

这是我第一次为人写作！ 如果您喜欢这篇文章，请与周围的人分享。

I am writing at blog.yaabed.com. If you enjoyed this article please make sure to share it with other people. And don’t forget to hit the follow button for more articles like this, also follow me on twitter.

我在blog.yaabed.com上写作。 如果您喜欢这篇文章，请确保与他人分享。 并且不要忘了点击关注按钮以获取更多类似这样的文章，也请在Twitter上关注我 。

Hi my name is Yazan Aabed. Grown up in Palestine. My major was in computer science. I am a Frontend Engineer & JavaScript lover ??‍?. Mostly working with Frontend frameworks like (AngularJs, ReactJS). You can call me #Geek ?. Also, I Like to share my knowledge with other people and learn from them ???. You can find me on GitHub, Medium, Twitter.

嗨，我叫Yazan Aabed 。 在巴勒斯坦长大。 我的专业是计算机科学。 我是前端工程师和JavaScript爱好者？ 大多数情况下都使用诸如(AngularJs，ReactJS)之类的前端框架。 你可以叫我#Geek？。 另外，我想与其他人分享我的知识并向他们学习。 您可以在GitHub， Mediu m， Twitt er上找到我。

webpack learning academywebpack learning academy exists to provide curated, high-quality learning content, devoted to the webpack open source…webpack.academyFrom Grunt and Bower to Webpack, Babel and Yarn — Migrating a legacy front-end build systemThe build system that I had inherited for the International Cancer Genome Consortium’s Data Portal was fairly modern…medium.comHow to Incrementally Switch to webpackThis is the second of a two-part series on why and how we switched our JavaScript bundling system from an ad hoc system…medium.comWhy We Switched to webpackThis is the first of a two-part series on why and how we switched our JavaScript bundling system from an ad hoc system…medium.comThe first steps from Grunt to WebpackGetting started with Webpack after using Gruntadvancedweb.huThe Journey to Webpack - Server Density BlogBy Kerry Gallagher, of Server Density. Published on the 6th January, 2016. For the past couple of years we built the…blog.serverdensity.com

webpack学习学院 webpack学习学院的存在是为了提供精选的高质量学习内容，这些资源专门用于webpack开源…… webpack.academy 从Grunt和Bower到Webpack，Babel和Yarn —迁移旧的前端构建系统 构建系统我为国际癌症基因组协会(International Cancer Genome Consortium)所继承的数据门户网站相当现代…… medium.com 如何逐步切换至Webpack 这是由两部分组成的系列文章的第二部分，内容涉及为什么以及如何将JavaScript捆绑系统从即席系统转换为…… medium.com 为什么我们要切换到webpack 这是一个分为两部分的系列文章的第一部分，介绍了为什么以及如何将我们JavaScript捆绑系统从即席系统切换到... medium.com 从Grunt到Webpack的第一步 使用后开始使用Webpack咕噜 advancedweb.hu 旅途中的WebPack -服务器密度博客 克里加拉格尔，服务器密度。 发布于2016年1月6日。在过去的几年中，我们建立了…… blog.serverdensity.com

[discussion] How did we go from Grunt to Gulp to Webpack? from       javascript

[讨论]我们如何从Grunt到Gulp再到Webpack？ 从javascript

翻译自: https://www.freecodecamp.org/news/how-to-upgrade-to-webpack-from-grunt-without-suffering-24fc26a94f5f/