webpack学习（2019/7/25-7/29）

2019-11-30 本文已影响0人洛音轩

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配置，希望在后面的学习中，尽快完善自己的知识体系。

webpack学习（2019/7/25-7/29）

1.讲了什么

2.做了什么

3.今日心得体会

4.明天要做什么

工作日志

课堂作业

1.输出文件带有哈希值

2.把js,css动态引入html中

3.less和sass自动编译

4.css抽取

5.实现js压缩

讲了什么？

1.介绍了很多插件

2.了解跨域，写工作日志

1.什么是跨域？

二、为什么浏览器要限制跨域访问呢?

三、为什么要跨域？

四、解决跨域问题的方法:

1.跨域资源共享（CORS）

2.通过jsonp跨域

3.通过修改document.domain来跨子域

4.使用window.name来进行跨域

5.使用HTML5的window.postMessage方法跨域

6.通过WebSocket进行跨域

7.图像ping（单向）

8.使用片段识别符来进行跨域

3.webpack的价值

做了什么？

今日心得

明天要做什么？

作业：配置在项目中配置webpack

工作日志

今日心得

遇到的问题

猜你喜欢

热点阅读