Webpack Babel
webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
Webpack Four Core Concepts:
- entry
- output
- loaders
- plugins
plugins
html-webpack-plugin (自动生成HTML插件)
clean-webpack-plugin (自动清空某个目录的文件)
const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Output Management!',template: 'index.html', //模板文件filename: 'c.html',//生成的html文件inject: false |‘head’,//js在html文件的head标签里面chunks: ['main', 'c'], //对应的entry 里面定义的chunksminify: {removeComments: true,//remove commentscollapseWhitespace: true //minify html,remove whitespace}})]};
Babel
Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
JS loader (将es6转变为普通js)
npm install --save-dev babel-loader babel-corenpm install babel-preset-env --save-dev
配置文件
通常在项目跟目录下,名称一般为 .babelrc
bebel preset
Babel presets can act as sharable set of Babel plugins and/or config options.
Official Presets
@babel/preset-env for compiling ES2015+ syntax@babel/preset-typescript for TypeScript@babel/preset-react for React@babel/preset-flow for Flow
Using a Preset
{"presets": ["babel-preset-myPreset", "@babel/preset-env"]}
Preset Ordering
Preset ordering is reversed (last to first).
{"presets": ["a", "b", "c"]}
Will run in the following order: c, b, then a.
Preset Options
Both plugins and presets can have options specified by wrapping the name and an options object in an array inside your config.
{"presets": ["presetA", // bare string["presetA"], // wrapped in array["presetA", {}] // 2nd argument is an empty options object["@babel/preset-env",{"loose": true,"modules": false}]]}
Babel 竞争者 SWC-Speedy Web Compiler
通过 rust 实现的 bable,速度快,但兼容性及生态比Babel 差
项目启动时,加载 node_modules 下某个js 因为js语法报错
通常 webpack 在构建时,是不会让 node_modules 下的文件走 babel tranpile 的,如果让 node_modules 下的文件也都走 babel tranpile会慢很多, 所以业界有个潜在的约定,npm 包发布前需要先用 babel 转出一份 es5 的代码。
但是有些 npm 包不遵守这个约定,没有转成 es5 就发上去,但有些包只支持 es5 的语法,遇到 const、let、()=> 类似的语法,就抛错了。
umi3 配置node_module 下的 pdfjs-dist 文件走babel tranpile
export default defineConfig({nodeModulesTransform: {type: 'none',exclude: ['pdfjs-dist']}});
nextjs 配置 babel
例如要加 styled-components 插件的 server-side rendering 支持
https://styled-components.com/docs/tooling#babel-plugin
注意:因为是nextjs 项目 要先定义好 "presets": ["next/babel"],
{"presets": ["next/babel"],"plugins": ["babel-plugin-styled-components"]}
config
rules: [{test: /\.js$/,//如果有react文件 test: /(\.jsx|\.js)$/,exclude: path.resolve(__dirname, 'node_modules'),include: path.resolve(__dirname, 'src'),loader: "babel-loader"},]
新建 .babelrc 文件 (指定要转换的js版本)
{"presets": ["env"]//如果有react文件 "presets": ["react", "env"]}
css
npm install --save-dev style-loader css-loadernpm install --save-dev postcss-loader autoprefixer
配置
{test: /\.css$/,use: [{loader: 'style-loader',},{loader: 'css-loader',options: {importLoaders: 1,//让css里面的@import 的文件也经过postcss 的处理}},{loader: 'postcss-loader'}]},
新建postcss.config.js 文件
module.exports = {plugins: [require('autoprefixer')]}