webpack简介
webpack简介
「已注销」
这个作者很懒,什么都没留下…
展开
-
0.webpack使用简介目录
webpack将开发和产品的js分离,使得开发人员不需要考虑代码从开发到产品转化,只需要将精力投入到将代码规划的更适合开发、维护等就可以了。1.开始使用webpack相关资料:深入浅出 Webpack:https://webpack.wuhaolin.cn/腾讯NEXT学院:https://www.bilibili.com/video/BV1a741197Hn?from=search&seid=10653642790570529623阮大神的dmeo:https://..原创 2020-06-10 17:20:39 · 178 阅读 · 0 评论 -
1.1.开始使用webpack
1.安装:在window环境下,已经安装好nodejs已经相应的npm,以下是安装代码。npm install webpack webpack-cli -g看一下安装成果,输入如以下代码。webpack -v是4.43.0版本的webpack。当然,如果npm内包较少,或者能够清楚掌握npm下的依赖的话,也可以直接看npm的依赖情况。2.使用:在一个空文件夹下,创建一个src文件,然后在src下创建index.js文件,和show.js文件。输入相关的代码:原创 2020-06-09 20:47:47 · 162 阅读 · 0 评论 -
1.2.entry 、output与大致原理
1.entry 、output:entry是入口文件,webpack从entry对应的文件开始,将其引用的模块代码打包成一个文件。相关的类型如下:类型 例子 含义 string ./app/entry' 入口模块的文件路径,可以是相对路径。 array ['./app/entry1', './app/entry2'] 入口模块的文件路径,可以是相对路径。 object { a: './app/entry-a', b: ['./app/e...原创 2020-06-10 10:21:49 · 303 阅读 · 0 评论 -
1.3.Module中的Loader配置:以css为案例
之前的webpack打包,只涉及到js文件本身,如果涉及到了使用其他语法的文件的话。比如说,css文件、使用了ES6语法的jsx(react)等,webpack就无法打包了。可以试着用原来方法尝试对涉及css文件的文件进行打包。文件如下:index.cssbody{ background-color: #333333;}hello.jsexport default function(){ document.write('hello');}index.jsim原创 2020-06-10 13:02:59 · 341 阅读 · 0 评论 -
1.4.plugin插件与devServer
module中的loader负责的是,对代码语言的解析、加载工作。而plugin则是在webpack的基础上,拓展新的功能辅助前端。这里用一下html-webpack-plugin,创建以下代码:index.jsdocument.write('hello, 我是index.\n');webpack.config.jsconst path = require('path')const HtmlWebPackPlugin = require('html-webpack-plug原创 2020-06-10 17:16:07 · 221 阅读 · 0 评论