webpack点滴-zf-webpack
珠峰-webpack1 https://www.cnblogs.com/coding4/p/11566412.html
##### 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
(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。
##### 多页面打包的时候抽离公共代码。
