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同时存在的执行顺序
- plugins运行在presets之前；
- plugins配置项，按照声明顺序执行，从第一个到最后一个；
- 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
