珠峰-webpack

##### webpack的优点。能够作哪里事情。

##### npx的运行原理  https://zhuanlan.zhihu.com/p/27840803

#### webpack的插件

html-webpack-plugin:
能够去掉多余的双引号，
加一个hash戳。
压缩变为一行。

 

#### webpack各类配置和原理。

#### loader的enforce   'pre'  previous post  不配置默认是normal

#### 图片可能自动发布到cdn上边去了。

 

##### 珠峰笔记--

> 能够作的事情。

代码转换。文件优化。代码分割。模块合并。自动刷新。代码校验。自动发布。

> 本身去写一个webpack的功能会用到哪些东西。

> webpack经常使用的loader 和plugin。

> 本身去写一个loader。

> npx

http://www.ruanyifeng.com/blog/2019/02/npx.html

(1) 执行本地的node_modules下的包的命令行工具。

(2) 若是本地没有那么下载远程的，会放到临时文件夹，用完就删除。

(3) 能够执行github上的源码。

(4) 能够执行不一样版本的node。

(5) 的

#### webpack各类插件的做用

> html-webpack-plugin 

(1) 去掉html页面中的空格。

(2) 压缩为一行。

(3) js后边加?解决缓存。

> css相关的loader

(1) css-loader是解析css的loader而style-loader是插入到的html中。

background: url("./logo.png”);

cssloader会翻译为

background: url(require("./logo.png”));

 

(2) 几种loader的执行顺序是从下到上，作右到左。

(3) sass相关的node-sass和sass-loader。

(4) stylus相关的。stylus-loader。

(5) style-loader设置参数插入的位置。

> css的拆离开插件。miniCssExtractPlugin

> css压缩optimize-css-assets-webpack-plugin

> js压缩(由于用了上边的css压缩,js压缩就必须用这个) uglifyjs-webpack-plugin

> babel 压缩

{

test:/\.js$/, // normal 普通的loader

 

use:{

loader:'babel-loader',

options:{ // 用babel-loader 须要把es6-es5

 

presets:[

'@babel/preset-env'

],

plugins:[

["@babel/plugin-proposal-decorators", { "legacy": true }],   // 这个用来解决装饰器

 

["@babel/plugin-proposal-class-properties", { "loose": true }], // 这个用来解决class

 

"@babel/plugin-transform-runtime”  //这个用来解决经常使用的 相似async函数等高级的用法。可是这个不支持es7的用法。须要@babel/polyfill的补丁包

]

}

},

 

> expose-loader 的全局用法。好比把$暴露给window

expose-loader的另一种用法: import $ from 'expose-loader?$!jquery';

方式1:

 方式2:

 

方式3: 引入不打包。     

你在html中已经引入了，在js中就忽略引入。直接使用

externals: {

jquery: "$"

},

 

> html-withimg-loader这个插件能够解决.html中的img中图片问题。

> watch 参数

> 版权声明

new webpack.BannerPlugin('make 2019 by jw’)

>  前端本身写假的数据。

 

  

> 前端和后端在一块儿的时候， 后端直接引用webpack模块，而后引用中间件。

> resolve中的mainFields配置  

在package.json中配置

和dependencies并列

style: 'dist/css/bootstrap.css '

main: 'dist/js/bootstrap '

webpack中配置:

resolve: {

  mainFields: ['style', 'main']

}

index.js中

import ‘bootstrap'

> resolve中的mainFile默认是[‘index.js’]  

> extensions

 

##### webpack优化    

不去查看某些包的依赖 jquery

忽略某些包的某个文件的打包。只手动引入须要的。

new webpack.IgnorePlugin(/\.\/locale/, /moment/),

 

// import moment from 'moment';

// // 设置语言

// // 手动引入所须要的语言

// import 'moment/locale/zh-cn'

// moment.locale('zh-cn');

// let r = moment().endOf('day').fromNow();

// console.log(r);

#### webpack的自我优化

// import 在生产环境下 会自动去除掉没用的代码

// tree-shaking 把没用到的代码 自动删除掉

// es6 模块会把结果放到defalut上

// let calc = require('./test');

// scope hosting 做用域提高

let a = 1;

 

let b = 2;

 

let c = 3;

 

let d = a+b+c; // 在webpack中自动省略 能够简化的代码

 

 

##### JSON.stringify()这个方法既能够去掉多余的空格换行，转为一行，也能够区分字符串和boolean。

 

##### 如何手写一个require。

 

##### 多页面打包的时候抽离公共代码。