1.讲了什么
- es6小复习
- 怎么用node读写文件？
- 怎么用babel将es6语法转换为es5语法？
- webpack和babel自己配置好
- 布置了课堂作业和作业
2.做了什么
- 解决了上述的问题
- 完成了上述的作业
3.今日心得体会
- webpack的配置因为版本兼容性问题，导致配置的时候，官网的文档有些bug,有点看不懂，整的挺崩溃的
4.明天要做什么
- 继续webpack的配置学习
作业（课堂作业，加作业），工作日志（讲什么，做什么，今日心得，遇到什么问题，明天要做什么），
工作日志
(2019.7.26)
课堂作业
1.输出文件带有哈希值
module.exports = {
entry: {
"main": './src/index.js',//入口文件
},
output: {
filename: '[name].[hash].js',//[hash]配置好以后，自动生成
path: path.resolve(__dirname, 'dist')//__dirname为当前的目录的绝对路径
},
}
配置output的filename属性，让其输出文件名加上‘[hash]’即可
2.把js,css动态引入html中
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
"main": './src/index.js',
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({}),
]
}
配置html-webpack-plugin即可动态生成html文件，并把生产的js，css文件以创建的script动态引入
3.less和sass自动编译
module.exports = {
entry: {
"main": './src/index.js',
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}, {
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
},
}
webpack本身只能打包js文件，但浏览器要加载的除js外，有css、less和图片等文件，所以就引入了loader来编译，style-loader用来将生产的js文件插入以script的方式加入到生成的html文件中，css-loader为了解析css，sass-loader将sass文件编译成css文件
4.css抽取
const MiniCssPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
"main": './src/index.js',
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new MiniCssPlugin({
filename: '[name].css',
})
]
}
将css单独提取不编译成js文件，需要mini-css-extract-plugin插件，配置如上
5.实现js压缩
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
"main": './src/index.js',
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new uglify(),
]
}
讲了什么？
1.介绍了很多插件
1.文件复制插件：把编译好的文件输出到相应目录下，copy-webpack-plugin
2.清除无关紧要的东西：clean-webpack-plugin
3.webpack热替换
4.webpack.DefinePlugin
5.Manifest
6.IgnorePlugin
7.mini-css-extract-plugin
8.optimize-css-assets-webpack-plugin
9.css module（不太懂）
10.sourceMap
11.代码拆分
12.抽取公共组件
13.webpack dll
2.了解跨域，写工作日志
1.什么是跨域？
在了解跨域之前，首先要知道什么是同源策略（same-origin policy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为：
- 1.Cookie、LocalStorage和IndexDB无法读取；
- 2.DOM无法获得；
- 3.AJAX请求不能发送。
- 特别注意两点：
- 第一，如果是协议和端口造成的跨域问题“前台”是无能为力的
- 第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上
- “URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。
二、为什么浏览器要限制跨域访问呢?
- 如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题
三、为什么要跨域？
- 既然有安全问题，那为什么又要跨域呢？ 有时公司内部有多个不同的子域，比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域
四、解决跨域问题的方法:
1.跨域资源共享（CORS）
- CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
- 服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。
只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入以下设置，就可以实现跨域访问了！ - 如下所示：
//指定允许其他域名访问
'Access-Control-Allow-Origin:*'//或指定域
//响应类型
'Access-Control-Allow-Methods:GET,POST'
//响应头设置
'Access-Control-Allow-Headers:x-requested-with,content-type
2.通过jsonp跨域
- JSONP是JSON with Padding（填充式json）的简写，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON
callback({"name","trigkit4"}); - JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据
- JSONP的原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入，所以jsonp是需要服务器端的页面进行相应的配合的。（即用JavaScript动态加载一个script文件，同时定义一个callback函数给script执行而已。）
- JSONP的优缺点：
- JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
- JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
- CORS和JSONP对比：
- CORS与JSONP相比，无疑更为先进、方便和可靠。
- （1）JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求；
- （2）使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得说句，比起JSONP有更好的错误处理；
- （3）JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS；
3.通过修改document.domain来跨子域
- 两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie或者处理iframe
- 比如A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那么只要设置相同的document.domain，两个网页就可以共享Cookie
4.使用window.name来进行跨域
- window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它
5.使用HTML5的window.postMessage方法跨域
- HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。
这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源
6.通过WebSocket进行跨域
- web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信
- web sockets原理：在js创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议
7.图像ping（单向）
- 什么是图像ping： 图像ping是与服务器进行简单、单向的跨域通信的一种方式，请求的数据是通过查询字符串的形式发送的，而相应可以是任意内容，但通常是像素图或204相应（No Content）。 图像ping有两个主要缺点：首先就是只能发送get请求，其次就是无法访问服务器的响应文本
- 使用方法
var img = new Image();
img.onload = img.onerror = function(){
alert("done!");
};
img.src = "https://raw.githubusercontent.com/zhangmengxue/Todo-List/master/me.jpg";
document.body.insertBefore(img,document.body.firstChild);
8.使用片段识别符来进行跨域
- 片段标识符（fragment identifier）指的是，URL的#号后面的部分
- 如果只是改变片段标识符，页面不会重新刷新。
父窗口可以把信息，写入子窗口的片段标识符 - 子窗口通过监听hashchange事件得到通知
3.webpack的价值
webpack是前端工程师的价值体现，也是工程化概念
做了什么？
完成的上述的部分任务，按照发的文档将dev-demo下载，调试能运行，看了部分的react基本操作
今日心得
遇到了哪些问题，怎么解决的
本来打算用react配置大作业，结果是时间不够，最后只是大概了解了一下react的语法，遇到的问题有很多，好些插件在官网上只是提了一下，并没有具体的使用实例，最后只能边看边查其他的网站资料。
明天要做什么？
继续webpack学习
作业（课堂作业，加作业），工作日志（讲什么，做什么，今日心得，遇到什么问题，明天要做什么）
作业：配置在项目中配置webpack
工作日志
今天主要进行大作业的配置
今日心得
- 今天在具体的项目上进行了webpack配置，实现了html，css，js的压缩，less，sass的编译，css的抽离，img的src路径的自动配置，background中url路径的base64转码
- 通过对各种插件和loader的配置使用，更加熟悉了webpack的功能实现
- 在配置的过程中遇到了各种各样的问题，去查找问题，解决问题，锻炼了资源查找的能力
遇到的问题
- background: url(./../img/mi-logo.png) no-repeat 50% 50%;和img src属性路径不能打包输出问题
解决方法：首先安装html-withimg-loader插件来解读html中img的src属性对应的url地址，
{
test:/\.html$/,
use:"html-withimg-loader"
}
用url-loader将src对应的图片提取到./dist/img中
{
test: /\.(jpg|png|jpeg|svg|ttf|woff)$/,
use: [{
loader: 'url-loader',
options: {
// name: '[name].[ext]',
outputPath: './img',
// publicPath: '/img'
limit:1000*1024,
}
}]
}
而然对于background-image中的图片可以通过url-loader转成base64格式，
转换前：
background: url(./../img/mi-logo.png) no-repeat 50% 50%;
转换后：
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAxCAYAAABznEEcAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0VDMUQzNzk0NEU4MTFFNzk2MkVGMzkwQUQ3RjNGMjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0VDMUQzN0E0NEU4MTFFNzk2MkVGMzkwQUQ3RjNGMjYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRUMxRDM3NzQ0RTgxMUU3OTYyRUYzOTBBRDdGM0YyNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDRUMxRDM3ODQ0RTgxMUU3OTYyRUYzOTBBRDdGM0YyNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoQEikwAAAEASURBVHja7JkxCsIwFIZbraCTirsOeoGO4gU8hRdw9AxuLl7AA+juAQRXL2BR8ARulSrGX8ggIa2ljYTI/+Ab+pK88JU0aakvhPBcj4r3B0EJSlCCEpSgBCUoQQlKaCMGogQJiMACdFLm2ChjYtMS9ZI3qwb6YAYOYKDp0yg6p43l1AVrk3PbeiZCMDZVLCg4bg8mOfpVwRAsQUtpG4GtTYkrOOXse5QyKyXfdm057X5ZPDBUp6nZOs9yq3zH3QWJOZgquR64uHRiWz35+e5ECUpQghKUMCFx03zpZbU/wePjOpG5rBrfaqaGzz9FlKAEJShBCUpQghKUoISNeAkwAAteNgN0VYtEAAAAAElFTkSuQmCC) no-repeat 50% 50%
- 如果直接给css添加兼容性前缀，直接使用postcss-loader是不行的，
//使用postcss-loader
use: ["css-loader","postcss-loader"]
创建postcss.config.js，加入如下代码：
module.exports = {//css加前缀
plugins: [
require('autoprefixer')
]
}
还需要
//创建.browserslistrc文件，写上
>1%
last 2 versions
not ie <= 8
- 打包输出html文件，使用HtmlWebpackPlugin插件
new HtmlWebpackPlugin({ // 打包输出HTML
title: 'Hello World app',
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true// 压缩内联css
},
filename: 'index.html',
template: './src/index.html',
inject:true
}),
- 对react框架很不熟悉，本来打算重新写一个react项目来联系webpack的配置，但是实际学习的过程中效率很低，所以最后选用了一个之前做过的项目来练习webpack配置，希望在后面的学习中，尽快完善自己的知识体系。
