为了账号安全,请及时绑定邮箱和手机立即绑定

从0搭建自己的webpack开发环境(三)

往期回顾:

1.处理JS模块

1.1 将es6代码编译成es5代码

代码的转化工作要交给babel来处理

npm install @babel/core @babel/preset-env babel-loader --save-dev

@babel/core是babel中的核心模块,@babel/preset-env 的作用是es6转化es5插件的插件集合,而babel-loaderwebpackloader的桥梁。

const sum = (a, b) => {
  return a + b;
};

增加babel的配置文件 .babelrc

{
    "presets": [
       ["@babel/preset-env"]
    ]
}

配置loader

module: {
	rules: [{ test: /\.js$/, use: "babel-loader" }]
},

现在打包已经可以成功的将es6语法转化成es5语法!

1.2 解析装饰器

npm i @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators --save-dev
"plugins": [
  ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ["@babel/plugin-proposal-class-properties",{"loose":true}]
]

legacy:true表示继续使用装饰器,loose为false时会采用Object.defineProperty定义属性

  • Plugin会运行在Preset之前
  • Plugin 会从第一个开始顺序执行,Preset则是相反的

1.3 polyfill

根据.browserslistrc文件,转化使用到的浏览器api

"presets": [
    ["@babel/preset-env",{
        "useBuiltIns":"usage", // 按需加载
        "corejs":2 // corejs 替代了以前的pollyfill
    }]
]

安装corejs

npm install core-js@2 --save

使用transform-runtime
A plugin that enables the re-use of Babel’s injected helper code to save on codesize.可以帮我们节省代码。

npm install --save-dev @babel/plugin-transform-runtime @babel/runtime

.babelrc中配置插件

"plugins": [
    "@babel/plugin-transform-runtime"
]

1.4 添加eslint

安装eslint

npm install eslint
npx eslint --init # 初始化配置文件
{
    test:/\.js/,
    enforce:'pre',
    use:'eslint-loader'
},

配置eslint-loader可以实时校验js文件的正确性,pre表示在所有loader执行前执行

2.source-map

  • eval:生成代码 每个模块都被eval执行,每一个打包后的模块后面都增加了包含sourceURL
  • source-map:产生map文件
  • inline:不会生成独立的 .map文件,会以dataURL形式插入
  • cheap:忽略打包后的列信息,不使用loader中的sourcemap
  • module:没有列信息,使用loader中的sourcemap(没有列信息)
devtool:isDev?'cheap-module-eval-source-map':false

每个库中采用的sourcemap方式不一,可以根据自己的需要自行配置

3.resolve解析

想实现使用require或是import的时候,可以尝试自动添加扩展名进行匹配

resolve: {
    extensions: [".js", ".jsx", ".json", ".css", ".ts", ".tsx", ".vue"]
},

4.拷贝静态文件

有时候在打包时希望将一些静态资源文件进行拷贝,可以使用copy-webpack-plugin插件

安装插件

npm i copy-webpack-plugin --save-dev

使用拷贝插件

const CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([
    {from:path.resolve('./src/static'),to:path.resolve('./dist')},
])

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消