webpack学习小项目

webpackStudy文件，学习笔记写在最后面

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>首页</title><!-- 这里不推荐直接引用任何包和css文件，应到main.js引入，然后这里只引main.js即可 --><!-- <script src="../dist/main.js"></script> --><!-- 但原main.js有ES6语法，用webpack处理后的文件在dist中 --><!-- <script src="../dist/bundle.js"></script> --><!-- 但用了html-webpack-plugin插件后，不需要手动处理bundle.js了，因为该插件会隐形创建一个script并引用正确路径的bundle.js --><!-- <script src="/bundle.js"></script> --><!-- 这次通过 cnpm i bootstrap -S 安装bootstrap -->
</head>
<body><ul><li>第1个li</li><li>第2个li</li><li>第3个li</li><li>第4个li</li><li>第5个li</li></ul><div class="box"></div><p>boostrap图标<span class="glyphicon glyphicon-heart" aria-hidden="true"></span></p>
</body>
</html>

main.js

// 此main.js是项目的JS入口文件// 导入node_modules中的Jquery包
// import X from XX 是ES6导入模块的方式。 类似于node中const X = require('X')
// 但ES6语法有的浏览器解析不了，所以要先用webpack做中间处理
import $ from 'jquery'// 导入css样式表
// webpack默认只能打包处理JS类型的文件，处理非JS文件要安装第三方loader加载器
// 1.打包css文件要安装 $ cnpm i style-loader css-loader -D
// 2.在webpack.config.js中配置节点 module
import './css/index.css'
// 处理less文件要安装less-loader. $ cnpm i less-loader -D
// less-loader依赖less $ cnpm i less -D
import './css/index.less'
// 处理scss文件要装 $ cnpm i sass-loader -D 依赖安装 $ cnpm i node-sass -D
import './css/index.scss'
import 'bootstrap/dist/css/bootstrap.css'$(function(){// 首页列表隔行变色$('li:even').css('background','pink')// $('li:even').css('background',function(){//     return '#999'// })
})// es5中构造函数写法
// function Student(name){//     this.name = name;
// }
// var stu = new Student('lxq');// ES6中构造函数写法，实现面向对象
class Student{// static可定义静态属性，即可以直接通过类名访问的属性，如Student.infostatic info = { name:'lxq', age:22 }
}
console.log(Student.info);// 1.webpack只能处理ES6的部分语法，更高级的ES6/7语法需借助第三方loader如Babel,转换为低级语法
// 安装Babel的两套命令：
// (1) $ cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// (2) $ cnpm i babel-preset-env babel-preset-stage-0 -D
// 2.然后在webpack.config.js的 module 节点的 rules 中添加规则：
// { test:/\.js$/, use:'babel-loader', exclude:/node_modules/ }
// 3.在项目根目录新建 .babelrc 的Babel配置文件
// {//     "presets":["env", "stage-0"],
//     "plugins":["transform-runtime"]
// }
// 如果以上操作后执行npm run dev报错提示需要babel-loader@7，则执行
// $ cnpm i babel-loader@7 -D

webpack.config.js

// 导入path路径模块
const path = require('path')
const webpack = require('webpack')
// 导入能在内存中生成HTML页面的插件，只要是插件都要放到plugins节点中
const htmlWebpackPlugin = require('html-webpack-plugin')// 向外公开的配置对象
module.exports = {// 入口文件，表示要用webpack打包的文件entry: path.join(__dirname, './src/main.js'),// 出口文件配置，指定打包后的文件存放目录output:{path: path.join(__dirname, './dist'),filename: 'bundle.js'},// 这是配置 webpack-dev-server命令参数的另一种方式devServer:{open:true,port:3000,// contentBase:'src',hot:true},// 配置插件的节点plugins:[new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象new htmlWebpackPlugin({ //创建一个在内存中生成HTML页面的插件template: path.join(__dirname, './src/index.html'), //指定模板页面filename: 'index.html' //指定生成的页面(复制)})],// 配置所有的第三方模块加载器module:{// 所有第三方模块的匹配规则rules:[{test: /\.css$/, use:['style-loader','css-loader']}, //配置处理.css文件的loader规则{test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},{test: /\.scss$/, use:['style-loader', 'css-loader','sass-loader']}, //配置处理.scss文件// 处理图片文件路径的loader，参数limit是给定的大小{test: /\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},{test: /\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'},// 配置Babel，转换高级的ES6语法{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }]}
}

package.json

{"name": "webpackStudy","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","//": "注释：webpack-dev-server配置命令的第2方式：其他参数放到webpack.config.js","dev": "webpack-dev-server"},"keywords": [],"author": "","license": "ISC","dependencies": {"bootstrap": "^3.4.1","jquery": "^3.4.1","popper.js": "^1.14.7"},"devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.5","babel-plugin-transform-runtime": "^6.23.0","babel-preset-env": "^1.7.0","babel-preset-stage-0": "^6.24.1","css-loader": "^3.2.0","file-loader": "^4.2.0","html-webpack-plugin": "^3.2.0","less": "^3.10.3","less-loader": "^5.0.0","node-sass": "^4.13.0","sass-loader": "^8.0.0","style-loader": "^1.0.0","url-loader": "^2.2.0","webpack": "^4.41.2","webpack-cli": "^3.3.9","webpack-dev-server": "^3.9.0"},"description": ""
}

笔记.md

其他重点学习文件：webpack.config.js、 main.js、 package.json<!-- webpack基于node -->
<!-- webpack作用：1.处理JS文件的互相依赖关系 2.处理JS的浏览器兼容问题-->
<!-- 初始化加package.json文件 -->
$ npm init -y<!-- 初始化node_modules，导入jquery模块包 -->
$ npm i jquery -S<!-- 用webpack给src\main.js做中间处理，转换文件放到dist下和bundle.js同级
命令格式如： webpack 原文件路径 新文件路径 -->
$ webpack .\src\main.js .\dist\bundle.js
<!-- 如果不想每次都写转换命令，可用配置文件webpack.config.js设置,执行命令时用'webpack'即可 --><!-- 用 webpack-dev-server 工具，可实现自动打包编译 -->
<!-- 安装到项目的本地开发依赖-->
$ npm i webpack-dev-server -D<!-- webpack-dev-server工具要求本地项目中也安装webpack -->
$ cnpm i webpack -D
<!-- 因webpack3、4版本不同，如果cnpm i webpack -D不行，再尝试 -->
$ cnpm i -D webpack-cliwebpack-dev-server在package.js的设置
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"webpack默认无法处理css文件中的url地址，应安装url-loader处理(它依赖file-loader)
$ cnpm i url-loader file-loader -D<!-- 用webpack安装boostrap包,现BS已到了版本4 -->
$ cnpm i bootstrap -S
<!-- 由于BS4.x版本icon文件分离出去,还需下载open-iconic。如果想直接用BS3可指定安装
-->
$ cnpm i bootstrap@3 -Sjson文件中不能写注释,字符串必用双引号，重要的注释可用：
"//": "注释内容"<!-- webpack引入Vue包，安装为运行依赖 -->
$ npm i vue -S如果已删除node_modules要重装，可清除缓存 $ npm cache clean --force 后再 $ npm install 或 $ cnpm i【 webpack2.4.*集成vue-loader@15.2.4报错？
官方文档 "https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required"。Vue-loader在15.*后版本的使用都需要配合 VueLoaderPlugin
解决方法：在webpack.config.js中加入
const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {// ...plugins: [new VueLoaderPlugin()]
}
】举例总结：webpack中如何使用vue？
1.安装vue包: cnpm i vue -S
2.安装能解析.vue组件的loader: cnpm i vue-loader vue-template-complier -D
3.main.js中导入vue模块： import Vue from 'vue'
4.定义.vue后缀组件(单文件组件包含template、script、style)
5.导入组件： import login from './login.vue'
6.创建vm实例，用render方法返回组件去渲染【webpack中用 vue-router】
若导入组件后，页面渲染的组件不显示也没报错，检查以下是否拼写错误，特别是routes
var router = new VueRouter({routes: [ // 注意是routes！{path:'/', component: app}     ]
})// ES6中
// 1.导入模块【import 模块名称 from '模块标识符'】
// 2.导入样式【import '路径'】
// 3.用 export default 和 export 向外公布成员。
// 在一个模块中，export default只允许向外暴露1次，而export可暴露多个成员
// 可在一个模块中同时使用export default和 export 暴露成员。
export default{name: 'zs',age: 22
}
//但使用export暴露的成员，只能用 {原成员名} 来接收，这叫按需导出
export var title = '小淇淇';
export var content = '非常棒';// Node中
// 1.导入模块【var 模块名称 = require '模块标识符'】
// 2.公布成员用 module.exports 和 exports

webpack学习小项目相关推荐

python机械_10分钟掌握Python-机器学习小项目
学习机器学习相关技术的最好方式就是先自己设计和完成一些小项目. Python 是一种非常流行和强大的解释性编程语言.不像 R 语言,Python 是个很完整的语言和平台,你既可以用来做研发,也可以用来 ...
python熊猫小课_Python-机器学习小项目
学习机器学习相关技术的最好方式就是先自己设计和完成一些小项目. Python 是一种非常流行和强大的解释性编程语言.不像 R 语言,Python 是个很完整的语言和平台,你既可以用来做研发,也可以用来 ...
50行代码实现的艺术签名设计微信小程序,轻松对接公众号,涨粉神器,学习赚钱两不误.微信公众号引流工具.html,python学习小项目.艺术签名设计微信小程序,前端学习小项目有趣的项目
50行代码实现的艺术签名设计微信小程序,轻松对接公众号,涨粉神器,学习赚钱两不误先看效果这个小程序实现艺术签名设计的功能对接到公众号之后,相当于给你的公众号添加了一个功能,别人关注公众号后,可以 ...
【教学】深度学习小项目汇总_含源代码包运行
pyqt5实现手写汉字界面pytorch版 pyqt5实现手写数字界面pytorch版水果识别小程序基于python的hog+svm实现目标检测 yolov5_deepsort目标跟踪行人统计数量 ...
【教学】深度学习小项目汇总_含源代码_包运行
pyqt5实现手写汉字界面pytorch版 pyqt5实现手写数字界面pytorch版水果识别小程序基于python的hog+svm实现目标检测 yolov5_deepsort目标跟踪行人统计数量 ...
webpack搭建vue项目开发环境【文档向学习】
为何有这篇文章各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...
小项目也可以学习到很多东西
今天分享关于最近做的一个小项目学习一些感悟. 1.小项目也能学习到非常多的知识最近做的是一个数据整理的一个项目,后台系统需要一些统计的数据,如果从原有的系统中查询,会大大影响到其他端的性能,而且相对 ...
STM32学习——入门小项目
博客地址:STM32学习--入门小项目 – Infinite's Blog 这个小项目是来自参加电设时,老师发的STM32入门(进阶)任务,具体的要求如下: 软件设计要求编写简单I/O程序,能用板上 ...
java学习笔记（二十八）——开发一个小项目（VMeeting3.0）
上篇文章按照较规范的产品需求文档梳理了项目的逻辑,感觉开发起来明晰了很多:挂上一篇文章java学习笔记(二十七)--开发一个小项目(VMeeting2.0)_Biangbangbing的博客-CSDN ...
C语言学习历程--小项目篇（1）
C语言学习历程–小项目篇–基于winpcap的UDP数据发送开发环境介绍 1.操作系统:windows10(基于x64处理器).IDE:vs 2019(微软官网个人免费版).winpcap安装包及开 ...

webpack学习小项目

webpack学习小项目相关推荐

最新文章

热门文章