webpack操作基础

webpack 是一个前端加载/打包工具,根据模块的依赖关系进行静态分析,并依根据规则生成对应的静态资源
安装温pack之前本地环境必须是已经安装node.js,然后按照下列步骤进行安装
查看本地是否已经安装Node.js
说明已经安装成功  版本是:6.4.1
Mac系统 加sudo
=====安装成功了,我们开始创建项目了
mdkir wpk-test  是创建一个文件夹wpkk-test文件
项目文件夹创建成功
需要绑定或者捆绑文件
新的文件bundle.js 诞生了
bundle里面写个内容,把他通过show来打印出来

多文件打包:
只是绑定一个作用不大,如果是很多文件怎么绑定,怎么依赖呢(打包)?下面是打包多个文件::
 
==>
再打包一下:
再擦启动页面:
打包成功

函数打包:
能不能通过函数来打包:(json和函数不一样,函数可以实现功能)
再次打包
打印页面:
通过函数功能来打包

样式的打包:
我们引入其他的加载器来打包一下样式文件:
有两种加载器:
css-loader---遍历文件代码:
style-loader--通过style标签引入到head头部部分:
注意下循序:1-style 2-css 如果循序换了就会报错
把样式绑定到js文件里面去:
 
初始化一下整个项目:
再新建一个json文件
新的json文件成功了:
再安装一下加载器:
写样式:
新建css文件: show.js文件
再遍历项目:

配置文件:
下面是天剑webpack项目添加webpack.config.js配置
新建src文件:
----整理一下项目文件:
index文件修改
遍历项目:
修改成功:
如果需要改css样式的化  在css文件进行修改,再遍历项目启动就可以了 (cmd 输入:webpack 回车就可以)

安装第三方库:
安装成功

服务端环境的安装:
json文件添加
HTML文件修改
启动项目 buld
安装-dev-server
通过8081端口打开:
再npm start 进行启动
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

猜你喜欢

转载自www.cnblogs.com/mahmud/p/10087603.html