我是靠谱客的博主 文静棒棒糖,最近开发中收集的这篇文章主要介绍python打包 缺少module_webpack打包原理入门探究(五)loader初探(一),觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

子由风:webpack打包原理入门探究(一)​zhuanlan.zhihu.com
子由风:webpack打包原理入门探究(二)基本配置​zhuanlan.zhihu.com
子由风:webpack打包原理入门探究(三)入口探究​zhuanlan.zhihu.com
子由风:webpack打包原理入门探究(四)插件探究(上)​zhuanlan.zhihu.com
子由风:webpack打包原理入门探究(四)插件探究(中)​zhuanlan.zhihu.com
子由风:webpack打包原理入门探究(四)插件探究(下)​zhuanlan.zhihu.com
Babel · The compiler for next generation JavaScript​babeljs.io

我们这一节会准备一些文件夹,之前的配置当作不存在,

58c32e22c844631bca26162ea4d995a7.png

layer.html

<

layer.scss

.

layer.js

import 

src/app.js

import 

添加 webpack.app.config.js 文件, 配置 module, 用于加载 loader

let 

你需要安装 babel-loader, babel-core, babel-preset-env

8b4a22703212db84cd67d44bc1b9255e.png

258402e6a07bd4a0e9059b0b5b7cf937.png

f2a6692c7090c8add5f673df89e8c9fe.png

配置 package.json

{
  

你还得配置一下 .babelrc 配置文件,配置 一下 preset-env, 根目录新建一个 .babelrc 文件

{
    

接着就是 npm run webpack.app

d06a8d91f884a6127a7f06a365640d52.png

发现报错了,

493e050faf8cdaf1e430612c0d4fa0b6.png

我们要修改一下 webpack.app.config.js:

356479924731830320dfcabb87c4a7af.png

再跑一边

736976580988607dbe4a2e0a441c1e37.png

原来是缺少一个 loader 去加载 html

npm install --save-dev html-loader

7c60c4c5064ead6e3bbb476ab12aacc9.png

修改一下 webpack.app.config.js

0b5fd2c1924521b0bb0361ea32828361.png

再来跑一遍

5f969eb7f33ae680ee8f84555204444f.png

生成的 main.bundle.js

/******/ 

dist/index.html

<!DOCTYPE html>

88e2c13fafec508dfd1bbd5e8911a55a.png

嗯,loader 的初步探究就到此为止了

最后

以上就是文静棒棒糖为你收集整理的python打包 缺少module_webpack打包原理入门探究(五)loader初探(一)的全部内容,希望文章能够帮你解决python打包 缺少module_webpack打包原理入门探究(五)loader初探(一)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(40)

评论列表共有 0 条评论

立即
投稿
返回
顶部