![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
Jacano
这个作者很懒,什么都没留下…
展开
-
【Webpack】从零构建Vue项目配置
从零开始构建基于webpack4.0的Vue项目脚手架原创 2019-10-22 14:55:21 · 419 阅读 · 0 评论 -
【webpack】模块化
前端模块化是目前的趋势,任何文件都可以当做一个模块,模块化中也有许多不同的标准。 1.CommonJS CommonJS是JavaScript的模块化规范,也受到Node.js的广泛使用,它的导入导出语句如下 //导入 const a = require("A") //导出 module.export = moduleA.func; 大部分npm包都实现了CommonJS规范,但缺点是无法直接...原创 2019-03-13 21:25:33 · 107 阅读 · 0 评论 -
【webpack】webpack4入门--entry、output
webpack是构建应用的打包工具,webpack将各个模块之间的依赖关系进行整理输出,官网的图片就已经很形象的说明这个道理。 我们通过实际动手来入门webpack 新建一个项目,用命令行npm init --yes初始化package.json文件。 创建一个config文件夹,再创建一个webpack.dev.js文件,该文件用于webpack的配置。 新建一个show.js,敲上代码 ...原创 2019-03-14 10:09:52 · 387 阅读 · 0 评论 -
【webpack】webpack4入门--loader使用
webpack的强大,在于有丰富的loader和插件。loader能够将浏览器环境原生不认识的文件转化为自己能够认识的文件。我们用css文件继续做个测试。 新建一个main.css文件 #app{ text-align: center } 现在我们的项目目录如下 . ├── config ├── index.html ├── main.css ├── main.js ├── node_mod...原创 2019-03-14 10:46:19 · 186 阅读 · 0 评论 -
【webpack】webpack4入门--插件使用
插件能拓展webpack的功能,让webpack更加灵活,我们使用插件来应用到webpack中。 首先安装mini-css-extract-plugin插件,这个插件是在webpack4中用于分离css文件的,webpack4之前用的是extract-text-webpack-plugin插件。 npm install mini-css-extract-plugin 安装完插件后,配置webpac...原创 2019-03-14 11:29:47 · 321 阅读 · 0 评论 -
【webpack】在webpack4中使用babel
babel是JS转译器,JS语法标准更新太快,而浏览器还未更新,babel就帮助我们将新标准的JS语法转译成浏览器能识别的JS标准。 我们在webpack中使用babel来转译JS npm install babel-core babel-loader babel-core是babel的核心包 修改show文件里的代码 // 操作 DOM 元素,把 content 显示到网页上 const sho...原创 2019-03-15 09:21:33 · 553 阅读 · 0 评论 -
【webpack】tree shaking使用
tree shaking主要是将import/export中未引用到的代码给找出来。 通过demo看tree shaking 给我们做了什么 . ├── dist ├── node_modules ├── package-lock.json ├── package.json ├── src └── webpack.config.js demo结构 // webpack.config.js con...原创 2019-04-22 13:58:52 · 456 阅读 · 0 评论