webpack:构建工具
-
构建工具:常用场景:react / vue
-
自带模块化(commonJS规范)
-
自带服务器,服务器也是基于node(webpack-Dev-server)
-
编译:es6->es5;jsx->es5;ts(typescript)->js
-
gulp所做的事情,webpack都可以做到
-
中文文档:概念 | webpack 中文网
-
安装3.x
-
cnpm install -g webpack@3.x // 全局安装 npm init//创建package.json
- 创建两个文件夹src和dist - src:源码文件 - dist:压缩过后文件 - 执行webpack webpack src/app.js dist/bundle.js-
快捷执行
"scripts": { "build": "webpack" } var path = require('path'); const config = { entry: './src/app.js', output: { path: path.resolve(__dirname,'dist'), filename: 'bundle.js' } }; module.exports = config; -
Webpack 5
使用
创建两个应用 app1 和 app2
mkdir app1
cd app1
npm init -y
npm install webpack webpack-cli html-webpack-plugin webpack-dev-server -D
然后创建 src 目录，并创建入口文件 ./src/index.js 和模板文件 ./src/index.html
2021/12/29
在 webpack.config.js 中，使用联邦模块插件
暴露-app1
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导入模块联邦插件
const Mfp = require('webpack').container.ModuleFederationPlugin;
module.exports = {
// mode 工作模式
mode: 'development',
// 入口
entry: './src/index.js',
// 出口
output: {
path: resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
// 模块
module: {
rules: [
]
},
// 插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new Mfp({
// 对外提供的打包后的文件名（引入时使用）
filename: 'app1.js',
// 当前应用模块名称
name: 'app1',
// 暴露模块
exposes: {
// 名称： 代码路径
'./Sitename': './src/SiteName.js',
}
})
],
// 服务器
devServer: {
// contentBase: resolve(__dirname, 'dist'),
static: { // static: ['assets']
directory: resolve(__dirname, 'dist')
},
port: 3001,
open: true
}
}export default (name)=>{
console.log('app1',name)
const div=document.createElement('div');
div.textContent=name;
return div
// document.body.appendChild(div);
}使用方
const { resolve } = require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin');
const ModuleFederationPlugin=require('webpack').container.ModuleFederationPlugin;
module.exports={
mode:'development',
entry:'./src/index.js',
output:{
path:resolve(__dirname,'dist'),
filename:'bundle.js'
},
module:{
rules:[]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new ModuleFederationPlugin({
filename:'app2.js',
name:'app2',
exposes:{},
remotes:{
'test':'app1@http://localhost:3001/app1.js'------------这里
}
})
],
devServer:{
port:3002,
open:true,
static:{
directory: resolve(__dirname,'dist')
}
}
}// 调用 app1 中的模块
import('test/Sitename').then(res => {
// res.default()
const title = res.default('应用 B')
document.body.append(title)
})拉取less
cnpm install --save less less-loader
建议初始化状态拉取配置
cnpm run eject
如果报git错,删除.git文件dev.js同样prod自己找,差不多,但不完全一样webpack.config.js
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;
// less配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},GIT
-
安装:git:分布式版本管理系统
-
在项目下,鼠标右击使用git bash
-
初始化(创建版本库):git init 会出现.git
-
pwd 会显示目录路径:请不要使用中文
-
who you are
git config --global user.name "Your Name" git config --global user.email "email@example.com" git config --global user.name "晁阳" git config --global user.email "2279679717@qq.com" git add hello.js//此时只是放到了暂存区 git commit -m '描述'//此时提交到版本库,进行管理master 查看版本库当前状态 git status git diff //查看未添加的修改
-
版本日志
git log 会显示版本日志,时间倒序 commit e2c269d46087a337f3f333bedccb6211db8a12ae//版本号---- Author: cy <2279679717@qq.com> Date: Sun Dec 30 14:25:26 2018 +0800 git relog看卡你的日志,包括回退等
-
版本回退
git reset --hard HEAD^回退一个版本 git reset --hard HEAD^^回退两个个版本....依次类推几个^回退几个版本 //版本前进 git reset --hard e2c269d46087a337//部分版本号即可
-
删除文件
rm 文件名 git rm git commit -m '删除'
-
分支管理
-
创建分支
git checkout -b cy//创建并进入分支
-
查看分支
git branch
-
切换分支
git checkout master
-
合并分支
首先合并分支,比如,你想用master合(吞)并掉cy分支 git checkout master 来到master下 git merge cy
-
删除分支
git branch -d cy -D
-
解决冲突
解决冲突就是把Git合并失败的文件手动编辑为我们希望的内容，再提交。
-
-
远程仓库
ssh-keygen -t rsa -C "youremail@example.com"//已经生成pub秘钥 1--GitHub上 echo "# -" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/cy2zq/-.git git push -u origin master
-
git上传忽略node_modules
输入 touch .gitignore ，生成“.gitignore”文件。 在”.gitignore” 文件里输入你要忽略的文件夹及其文件 .DS_Store node_modules/ dist/ npm-debug.log
-
-
构建工具
自动化，对于需要反复重复执行的任务，可以使用自动化完成，例如：压缩、代码检查、测试等等...
-
安装全局gulp
cnpm install --global gulp
-
安装项目依赖
cnpm install --save-dev gulp
-
在项目根目录下创建一个名为 gulpfile.js 的文件
var gulp = require('gulp'); gulp.task('default', function() { // 压缩，合并... console.log("hello gulp"); }) -
gulp常用方法：
gulp.task(str,fn) 创建一个gulp任务 gulp.src(path) 文件来源 gulp.dest(path) 操作之后的文件到哪里去 .pipe(package) 执行一个gulp功能 gulp.watch() 监听 gulp.start() 执行gulp任务 -
gulp：插件作用(以下插件都是项目依赖)
-
压缩js第三方插件
cnpm install --save-dev gulp-uglify
-
压缩CSS文件
cnpm install --save-dev gulp-minify-css
-
压缩HTML文件
cnpm install --save-dev gulp-minify-html
-
压缩图片文件
cnpm install --save-dev gulp-imagemin https://github.com/sindresorhus/gulp-imagemin ffmpeg
-
代码检查
cnpm install --save-dev gulp-jshint jshint 注意：很多公司是有自己learder修改的编码方式 // bad good
-
合并、重命名
cnpm install --save-dev gulp-concat gulp-rename
-
-
-
集中式版本管理系统:SVN
也叫版本控制器或版本迭代器,换句话说就是存储和管理我们的代码的地方 版本库存在中央服务器:一台服务器 当我们使用时,需要从中央服务器更新代码 可以使用内网(局域网),和外网(互联网) 缺点:但必须依赖网络;一旦中央服务器出现问题,将无法继续进行工作
-
安装--安装visualSVN:这是中央服务器
-
端口:443--80;8443--8080
-
创建新的资源库
-
创建用户
-
右击新建的资源库copy资源库的地址
-
上传:导入:但为关联--单向数据流
-
检出:双向关联:会有.svn文件
-
图标
-
绿色对号:成功
-
黄色感叹号:冲突
-
红色感叹号:与服务器不一致
-
-
-
安装客户端
-
不用SVN时,记得要关闭,否则端口会被占用(正方形)
-
-
940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
