Webpack 3.0 front-end engineering (background, modular, environment preparation)

(1) Background

　　

 

 

　　On the Google tool module by dividing influence had inspired

　　

　　

　　With the promotion of the SPA, the complexity of the application front-end rapidly.

　　

 

　　

 

 

 　　

 

 

 　　MVC era there was the initial idea of ​​modular

　　

 

　　Three framework put modular concept to promote popularity.

The modular and must face the problem of packaging and related new syntax conversion

　　

 

 

 　　

As can be seen above HTML, CSS history of development, pre-language Less, Sass and so on, how to write a code for (new and old grammar), can run properly in different browsers, where they used the build tool

　　

coffeeScript launched by the Ruby community js syntactic sugar

　　

 

 

 　　

 

 

 　　

 

 

 　　

 

　　

To the center : dependencies to solve a problem is more focused, more fragmented

　　

Because the current three major mainstream frameworks to use as the default build tool webpack

　　

 

(2) Guidance

　　

 

 

 　　

 

 

 　　

 

 

 　　

　　、

 

 

　　

 

 

 　　

 

 

 

 

(3) Modular

　　

 

 

 　　JS modular development

1 , namespace (more popular a few years ago), see Talking JavaScript namespace
 2 , common.js born in the node community, applied to the server, the client can not use
 3 , AMD, CMD, UMD is later used in the modular specification browser
 4 , ES6 ES6 Module with the popularity of modular specifications begin using ES6

　　

Drawbacks: the need to remember the full path name, then NameSpace.type.method

　　

 

 

 　　

 

 

 　　

 

　　

 

 

 　　

 

 

 　　

 

 

 　　

 

 

 　　

 

 

 　　

 

 

 　　

 

 

 　　

1、ES6模块导入使用import...from...，{}里存放导入的方法
2、可以一起导入，也可以分开导入
3、named as myName中的as为重命名
4、import * as mylib from 'src/lib'
    把模块里定义导出的所有方法，绑定到mylib对象上
5、import 'src/mylib'代表只是把文件模块加载进来，没有调用相关方法

　　《1》暴露变量定义

 

 

　　　　

 

 

 　　《2》暴露方法定义

　　　　

 

 

 　　《3》暴露默认模块，可以是变量、函数、字符串、数字、匿名函数、类class等

　　　　

　　《4》选择性暴露方法、导出时重命名

　　　　

　　《5》导入后导出export...from...

　　　　

 

　　详见ES6模块化规范之ESM

 

 　　

注意：webpack新版本3+开始，便已经支持了ES6规范，不再需要babel

　　

　　

　　

 

 

 　　

　　

　　

　　

　　BEM风格代码案例：

　　

 

 　　

 

 

　　

 

（3）环境准备

　　

 

 　　命令行工具

　　

　　安装Webpack全局工具