本系列文章的webpack版本未webpack4
Js的處理
處理Js模塊
yarn add babel-loader @babel/core @babel/preset-env -D
loader調(diào)用babel/core,babel/core調(diào)用轉(zhuǎn)化模塊
{
test: /\.js$/,
exclude:/node_modules/,
use: [
{
loader: "babel-loader",
options: {
// 用babel-loader俯逾，es6-》5，
presets:[
'@babel/preset-env'
],
plugins:[
'@babel/plugin-proposal-class-properties'
]
}
}
],
}
另外的高級語法，es7
class A{
a=1
}
根據(jù)報錯安裝冒滩，
yarn add @babel/plugin-proposal-class-properties -D
或者裝飾器，去babel官網(wǎng)搜索肃晚。
yarn add @babel/plugin-proposal-decorators
{
"presets": [
"@babel/preset-env"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
}
處理js語法及運行時校驗
比如Promise Generator等打包后不能正確工作
yarn add @babel/plugin-transform-runtime -D
yarn add @babel/runtime --save
實例的方法不會被解析 用
yarn add @babel/polyfill --save
會將實現(xiàn)的補丁引入打包后代碼
在index.js文件引入 @babel/polyfill
import "@babel/polyfill"
配置eslint
yarn add eslint eslint-loader -D
{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: "eslint-loader",
options: {
enforce: 'pre' //強制更改順序秽荤，pre 前 post 后
}
}],
},
去官網(wǎng)配置下載 或者自行配置 .eslintrc.js
由于loader的順序是從右向左，從下到上黄鳍。
增加.eslintignore文件進(jìn)行忽略
