![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
�Distance.?
这个作者很懒,什么都没留下…
展开
-
git相关命令
git config --global user.name //配置姓名git config --global user.email //配置邮箱git config --list //查看配置信息git init //初始化本地仓库git status //查看文件状态git add 文件名 //添加某个文件到暂存区,如果写 . 代表当前文件夹下所有的文件、git co...原创 2020-03-25 11:46:16 · 74 阅读 · 1 评论 -
23.vue脚手架-介绍并安装3.x版本的vue脚手架
1. 安装 vue clinpm install -g @vue/cli2. 查看 vue cli 的版本vue -V原创 2020-03-08 12:57:52 · 141 阅读 · 0 评论 -
22.单文件组件-webpack打包发布
1. 添加 build 命令在 package.json 的 scripts 中添加 build 命令"build": "webpack -p"2. 运行 打包命令npm run build3. 查看生成的文件4. 预览效果双击 dist/index.html 预览效果 页面显示正常...原创 2020-03-08 12:55:55 · 213 阅读 · 0 评论 -
21.单文件组件-在webpack项目中使用vue
1. 安装 vuenpm i -S vue2. 在 index.html 中加入控制区域 el<div id="app"></div>3. 在 index.js 中加入 vue 的代码通过 render 函数渲染 App 根组件// 1. 导入 Vue 构造函数import Vue from 'vue'// 2. 导入 App 根组件import ...原创 2020-03-08 12:52:03 · 175 阅读 · 0 评论 -
20.单文件组件-配置.vue文件的loader加载器
1. 在 index.js 中引入 App.vueimport App from "./components/App.vue"2. 预览浏览器 发现出错了提示缺少合适的loader3. 安装 vue-loadernpm i -D vue-loader vue-template-compiler4. 配置 webpack.config.js 文件const path = re...原创 2020-03-08 12:49:26 · 306 阅读 · 0 评论 -
19.单文件组件-单文件组件的组成结构
1. 创建 components/App.vue 文件2. 完善 App.vue 组件的内容<template> <div> <h1>这是 App 根组件</h1> </div></template><script>export default { data() { ret...原创 2020-03-08 12:46:42 · 521 阅读 · 0 评论 -
18.webpack加载器-打包处理js文件中的高级语法
1. 在index.js中添加 es6语法的代码class Person { static info = "aaa"}console.log(Person.info)2. 打开浏览器 效果3. 安装 babel 核心和loadernpm i -D babel-loader @babel/core @babel/runtime4. 安装 babel 语法和插件`npm...原创 2020-03-06 11:43:23 · 311 阅读 · 1 评论 -
17.webpack加载器-打包样式表中的图片和字体文件
1. 修改 index.html 添加 div 层<div id="box"></div>2. 修改 1.css 文件 添加样式#box { width: 580px; height: 340px; background-color: pink; background: url("../images/1.jpg");}3. 添加图片素材复...原创 2020-03-06 11:36:26 · 256 阅读 · 0 评论 -
16.webpack加载器-配置postCSS
1. 在index页面中添加input输入框<input type="text" placeholder="ceshi" />2. 在1.css中添加样式::placeholder { color: red;}3. 预览效果chrome浏览器 提示文本为红色 显示正常ie浏览器 提示文本为红色 显示不正常4. 安装postcssnpm i -D post...原创 2020-03-05 15:50:25 · 178 阅读 · 0 评论 -
15.webpack加载器-打包处理scss文件
1. 创建 src\css\1.scss 文件ul { font-size: 12px; li { line-height: 30px; }}2. 在 index.js 中引入 1.scss 文件import "./css/1.scss"3. 自动打包的时候提示了错误提示缺少一个合适的 loader 来处理 .scss 文件4. 安装 loadernp...原创 2020-03-05 15:41:40 · 365 阅读 · 0 评论 -
14.webpack加载器-打包处理less文件
1. 创建 src\css\1.less 文件body { margin: 0; padding: 0; ul { margin: 0; padding: 0; }}2. 在 index.js 中引入 1.less 文件import "./css/1.less"3. 自动打包的时候提示了错误提示缺少一个合适的 loader 来处理 .less 文...原创 2020-03-05 15:38:24 · 197 阅读 · 0 评论 -
13.webpack加载器-打包处理css文件
1. 创建 src\css\1.css 文件li { list-style: none;}2. 在 index.js 中引入 1.css 文件import "./css/1.css"3. 自动打包的时候提示了错误提示缺少一个合适的 loader 来处理 .css 文件4. 安装 loadernpm i -D style-loader css-loader5. 解...原创 2020-03-05 15:34:25 · 139 阅读 · 0 评论 -
12.webpack-配置自动打包相关的参数
修改启动脚本打开 pageage.json 文件 修改 dev 的配置"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"关闭并重新运行每次修改了 webpack 的配置文件 webpack.config.js 文件 都需要重新运行npm run dev浏览器会自动打开...原创 2020-03-05 15:29:39 · 160 阅读 · 0 评论 -
11.webpack-配置html-webpack-plugin生成预览页面
html-webpack-pluginhtml-webpack-plugin 将index.html文件也生成到了内存中 这样直接访问 http://localhost:8080/ 就可以打开 index.html 文件 html-webpack-plugin 还会自动引入js文件 不需要我们引入js文件1. 安装 html-webpack-plugin运行 npm i -D html-w...原创 2020-03-05 15:27:00 · 134 阅读 · 0 评论 -
10.webpack-配置webpack的自动打包功能
webpackwebpack 可以打包项目用到的js和非js文件 但是每次修改 都需要手动执行打包命令 然后刷新浏览器页面 比较麻烦webpack-dev-server实现了项目自动打包功能 每次修改文件 会自动打包并生成 bundle.js (mian.js) 文件 然后刷新浏览器页面1. 安装 webpack-dev-servernpm i -D webpack-dev-server...原创 2020-03-05 15:19:25 · 772 阅读 · 1 评论 -
9.webpack-配置打包的入口与出口
修改 webpack.config.js 文件 添加入口和出口配置const path = require("path") // 导入 node.js 中专门操作路径的模块module.exports = { // mode 用来指定构建模式 mode: "development", // development production entry: path.join(__d...原创 2020-02-15 18:40:24 · 283 阅读 · 0 评论 -
5.ES6模块化语法-直接导入并执行模块代码
创建 m2.js 文件// 当前文件模块为 m2.js// 在当前模块中执行一个 for 循环操作for(let i = 0; i < 3; i++) { console.log(i)}2. 修改 index.js 文件// 直接导入并执行模块代码import './m2.js'执行 index.jsnpx babel-node index.js...原创 2020-02-15 18:34:23 · 282 阅读 · 0 评论 -
4.ES6模块化语法-按需导出与按需导入
修改 m1.js 文件// 当前文件模块为 m1.js// 定义私有成员 a 和 clet a = 10let c = 20// 外界访问不到变量 d ,因为它没有被暴露出去let d = 30function show() {}// 将本模块中的私有成员暴露出去,供其它模块使用export default { a, c, show}// 当前文件模块为...原创 2020-02-15 18:28:48 · 441 阅读 · 0 评论 -
3.ES6模块化语法-默认导出与默认导入
创建 m1.js 文件// 当前文件模块为 m1.js// 定义私有成员 a 和 clet a = 10let c = 20// 外界访问不到变量 d ,因为它没有被暴露出去let d = 30function show() {}// 将本模块中的私有成员暴露出去,供其它模块使用export default { a, c, show}修改 index...原创 2020-02-15 17:41:22 · 470 阅读 · 0 评论 -
2.前端工程化-Node.js中通过babel体验ES6模块化
设置淘宝镜像一台电脑只需要设置一次npm config set registry "https://registry.npm.taobao.org"创建项目文件夹名称不要使用中文 不能使用 babel 因为会和第三方模块babel名称冲突推荐使用: babel-study打开cmd窗口在地址栏输入cmd 然后回车 打开cmd窗口初始化项目注意: 使用npm ...原创 2020-02-15 17:37:27 · 321 阅读 · 0 评论 -
8.webpack-在项目中安装和配置webpack
安装 webpack 开发依赖包运行 npm i -D webpack webpack-cli 命令,安装 webpack 相关的包npm i -D webpack webpack-cli创建 webcpack 配置文件在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件编辑 webpack 配置文件在 webpack 的配置文件中...原创 2020-02-15 17:19:16 · 136 阅读 · 0 评论 -
7.webpack-创建列表隔行变色项目
前端工程化-Node.js中通过babel体验ES6模块化设置淘宝镜像一台电脑只需要设置一次npm config set registry “https://registry.npm.taobao.org”2. 创建项目文件夹名称不要使用中文 不能使用 webpack 因为会和第三方模块webpack名称冲突推荐使用: webpack-study3. 打开cmd窗口在地址栏输...原创 2020-02-15 16:48:05 · 185 阅读 · 0 评论