[js高手之路]浅显webpack教程连串索引目录:

webpack,笔者想我们应该都知晓还是听过,Webpack是前者叁个工具,可以让各种模块举行加载,预处理,再开始展览包装。现代的前端开发很多环境都凭借webpack营造,比如vue官方就引进应用webpack.废话不多说,大家赶紧起始吧.

第一步、安装webpack

新建文件夹webpack->再在webpack上边新建demo->命令行切换成demo目录,使用npm
init –yes 初阶化项指标package.json文件,然后实施npm install webpack
–save-dev

json 1

 

其次步、全局安装webpack(3.5.6本子): npm install webpack@3.5.6 -g  
安装达成以往用webpack -v 查看webpack的本子

json 2

其三步、新建1个index.js文件,输入1个函数,弹出一些新闻,然后调用函数,最终用webpack
打包( webpack index.js
index.bundle.js ):把index.js文件打包成index.bundle.js

json 3

就会在现阶段的目录下面生成index.bundle.js文件.

第肆步、新建二个index.html文件,然后引入index.bundle.js
就能使用那一个js文件了

json 4

第⑤步、把三个js文件一起打包合并

除此以外在当前目录上边新建二个calc.js文件,然后在用module.exports导出

json 5

下一场在index.js文件中用var oCalc = require( ‘./calc.js’ )引入calc.js,  
在调用函数oCalc.add( 10, 20 ),   那现在就有了三个函数在index.js中了,
再一次执行命令

webpack index.js index.bundle.js, 合并打包之后,
 重新刷新下index.html,是还是不是弹出了add函数的结果吗? 

第六步、loader的使用

在当前目录下新建style.css文件,然后用require引入index.js文件中,
执行二遍打包(webpack index.js
index.bundle.js),这么些时候会报错,报错新闻显示为(你要求loader去处理css文件).

json 6

第玖步、安装与运用loader

咱俩需求安装三个loader,css-loader,style-loader(   安装命令: npm
install css-loader style-loader –save-dev ), 再用require加载

json 7

再次实施三回打包( webpack index.js index.bundle.js
),然后刷新index.html文件, 看看是否css文件中的body{ background: red }
生效了啊(浏览器body的背景变红)?

第7步、更详细的打包音讯

webpack打包,前边能够跟很多参数,如:

–progress: 打包进程

–display-modules: 打包的模块 

json,–colors: 是或不是彩色突显 打包提醒新闻

–display-reasons: 打包原因

–watch: 自动监察和控制文件变化

等等,还有众多,能够参见官网

json 8

末尾还有插件,配置等等很多类型支付中的常见的知识额

相关文章

网站地图xml地图