webpack超详细配置，使⽤教程（图⽂）
流程
webpack安装
Step 1: ⾸先安装Node.js, 可以去下载.
Step2: 在Git或者cmd中输⼊下⾯这段代码, 通过全局先将webpack指令安装进电脑中
npm install webpack -g
Step3: 使⽤Git Bash here 或者 cmd cd命令使当前⽬录转到当前项⽬的⽬录下, 然后输⼊下⾯这段命令
npm init
接下来会弹出⼀些信息, 就是⼀些项⽬名和⼀些参数的描述, 可以全部按回车使⽤默认信息, 完成之后项⽬⽂件夹下会⽣成⼀个package.json的⽂件
数据库设计与应用
这样webpack就安装完成了.
webpack配置
Step1: 创建项⽬⽂件夹, 名字⾃起, 但路径名不要包含中⽂, 以及项⽬名也不要叫”webpack”, 并且不要
包含⼤写字母.
例:Step2: 接下来创建并编写配置⽂件. ⾸先我们先介绍⼏个配置⽂件的参数. entry： 是 页⾯⼊⼝⽂件配置 （html⽂件引⼊唯⼀的js ⽂件）output：对应输出项配置 path ：⼊⼝⽂件最终要输出到哪⾥，filename：输出⽂件的名称publicPath：公共资源路径
Step3: 在你的项⽬⽬录下创建fig.js配置⽂件, 通过这个⽂件进⾏webpack的配置, 并且还要创建⼀些路径保存基本⽂件.
例如:
src⽂件夹
Step4: 在src的js下创建⼀个⼊⼝⽂件, 我创建的叫做entry.js, 在项⽬⽬录再创建⼀个index.html⽤来调试使⽤. 编写
我们随便在index.html和⼊⼝⽂件entry.js写点什么看看是否成功配置,//fig.ports = { entry : './src/js/entry.js',//⼊⼝⽂件 output : {//输出⽂件 filename : 'index.js',//输出⽂件名 path : __dirname + '/out'//输出⽂件路径 },}
1
2
3
4
5
6
7jquery下载的文件怎么使用
8//index.html <!DOCTYPE html><html lang ="en"><head > <meta charset ="UTF-8" /> <title >ss </title ></head ><body >111 <script src ="./out/index.js"></script >//注意在这⾥引⼊的是打包完成的js ⽂件</body ></html >
1
2
3
4
5
6
7
8
9
10
11
12
之后使⽤Git Bash here 或者 cmd cd命令使⽬录为当前项⽬⽬录, 输⼊webpack或者webpack -w命令, 查看index.html是否成功console出1234;
webpack 和 webpack -w 区别
webpack -w可以对项⽬打包并且实时监控, 当前配置⽂件下的⽂件如果发⽣更改时重新打包, 但如果webpack的配置⽂件即fig.js更改时还是要通过webpack进⾏打包.(退出webpack -w 操作 ctrl+c)
webpack loader 加载器接下来我们继续配置loader, 通过加载器处理⽂件：⽐如 sass less 等, 告知 webpack 每⼀种⽂件都需要使⽤什么加载器来处理。Step1: 为了⽅便我们先统⼀把所有的包都先下载下来, 下⾯再慢慢解释.Step2: 下载完成后, 我们修改fig.js⽂件, 将加载器引⼊.Step3: 接下来我们先测试css, 我们在项⽬⽂件夹下的src⽂件夹下创建index.css. 随便写⼀点属性.
//entry.js console.log('1234');
1
2npm install babel -loader babel babel -core css -loader style -loader url -loader file -loader less -loader less --save -dev
1
文史类旅游网站源码模板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16//index .css .demo1 { width: 100px ; height: 100px ; background: red ;}.demo2 {
1
2
3
4
5
6
7
因为在webpack中所有⽂件都是模块, 所以必须要将css引⼊. 在刚刚的entry.js中添加如下代码.
打包webpack⼀下看看效果
Step4: 当有多个js⽂件时, 如何进⾏引⼊呢? 接下来我们做⼀个简单⼩功能来说明这个问题, 让我们点击⽅块的时候, ⽅块变⼤.接下来在src的js⽂件夹下创建⼀个基本的⼯具tool.js (很多⼩的问题都被我扩⼤化了, 只是为了说明问题不⼀定适⽤).demo2 { width: 200px ; height: 200px ; background: orange ;}
7
8
9
10
11//index.html <!DOCTYPE html><html lang ="en"><head ><meta charset ="UTF-8" /><title >text </title ></head ><body ><div class ="demo1"></div ><div class ="demo2"></div ><script src ="./out/index.js"></script ></body ></html >
1
2
3
4
5
6
7
8
9
10
11
12
13//entry.js require('../css/index.css');//引⼊css ⽂件console.log("1234");
1
2
3//tool.js var tool = {//获取DOM 元素 getDom: function (className) { return ElementsByClassName(className)[0]; }}ports = tool;//模块出⼝
1
java十大产品2知宇发卡网源码
3
4
5
6css样式中文翻译
7
8
src的js下创建⼀个demo1.js⽂件, demo2.js同理
修改⼊⼝⽂件entry.js
webpack⼀下, 看看效果
关于图⽚的打包ports = tool;//模块出⼝
8var obj = require('./tool.js'); var demo1 = { init: function () { this .bindEvent(); }, bindEvent: function () { //var demo1 = ElementsByClassName('demo1')[0]; var demo1 = Dom('demo1'); lick = this .changeStyle; }, changeStyle: function () { this .style.width = '200px'; this .style.height = '200px'; this .style.background = 'green'; console.log('1'); }}ports = demo1;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19require('../css/index.css');var demo1 = require('../js/demo1.js');var demo2 = require('../js/demo2.js'); demo1.init(); demo2.init();
1
2
3
4
5
6
7
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论