2019-10-21 webpack配置从0配置

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

npm install webpack webpack-cli --save -dev

1.webpack-cli 解析webpack运行时传入的参数
webpack未全局安装时
npx是npm5.2之后出的新功能 可帮助执行.bin目录下的可执行文件

npx webpack

https://blog.csdn.net/csdn_yudong/article/details/81670477

2.webpack 0配置有默认入口entry 和出口output

npx webpack --mode development

或者
配置package参数scripts: {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
然后npm run dev 或者npm run build

commonjs规范 eslint代码检测工具

nodejs操作文件的两个变量 __dirname和 __filename
path.resolve() 方法将路径或路径片段的序列解析为绝对路径。

常用插件

• 插件webpack-merge用来合并配置文件
• development在开发环境时服务配置使用webpack devserver 可用端口访问
• 插件 html-webpack-plugin 生产环境时使用html模板生成页面 并引入打包后的js
• 插件 clean-webpack-plugin 生产环境时打包之前清除目标目录下的文件

解析css

• css-loader解析css style-loader将css生成style标签写在页面上
• 使用scss样式预处理器时 安装node-sass和sass-loader
• postcss-loader和autoprefixer为样式添加浏览器前缀
• mini-css-extract-plugin插件可设置在生产环境时抽离样式输出到指定文件，加载样式。可同时使用optimize-css-assets-webpack-plugin压缩样式文件，但是这样会破坏生产环境下的js自动压缩，需要另外再使用terser-webpack-plugin插件将js压缩一下。

加载文件

• 使用file-loader和url-loader url-loader插件可以设置将小于一定大小的图片转为base64格式 以减少图标文件等的http请求

编译js

• 使用babel-loader 加载babel使js现代语法转为浏览器可以执行的js
  顺序 babel-loader --> @babel/core -->@babel/preset-env。
  实际使用中不同的js草案语法可能需要使用不同的插件处理脚本

问题：安装npm install时候什么时候使用--save什么时候使用--save-dev
问题：.js .jsx .ts .tsx 这几个后缀文件的区别

presets：预设，即一组预先设定的插件，是babel插件的组合
presets与plugins同时存在的执行顺序

1. plugins运行在presets之前；
2. plugins配置项，按照声明顺序执行，从第一个到最后一个；
3. presets配置项，按照声明逆序执行，从最后一个到第一个（主要是为了确保向后兼容）

使用React

安装react包

npm install react react-dom --save-dev
npm install @babel/preset-react --save-dev

@babel/preset-react预设可以将jsx语法转为javascript 再@babel/preset-env转换为es5

React + Typescript + webpack

安装typescript 安装@types/react @types/react-dom使用

• 方案1

安装ts-loader 和typescript集来使用

• 方案2

babel7提供了编译typescript的包 @babel/preset-typescript 可以使用
@babel/preset-typescript是将typescrip转为javascript