很久没有发文章了,但是强调一点,大~熊同学最近可没闲着。学习算法,复习计算机网络,也顺便学习了一下webpack,看了看操作系统(没办法,都没学,要是不学连实习笔试都过不了,伤心~~)。本来比较纠结是写关于算法的文章呢还是关于webpack的呢。最终决定写关于webpack 的, ...
很久没有发文章了,但是强调一点,大~熊同学最近可没闲着。学习算法,复习计算机网络,也顺便学习了一下webpack,看了看操作系统(没办法,都没学,要是不学连实习笔试都过不了,伤心~~)。本来比较纠结是写关于算法的文章呢还是关于webpack的呢。最终决定写关于webpack 的,一方面,虽然刚刚开始学习webpack,但是他的特性让人感觉非常爽,然我有一种想分享的冲动;另一方面,算法要写公式,这个编辑器貌似不太好编辑,截图也比较麻烦。废话不说了,这篇文章介绍webpack的四个核心配置项。我写的不好,你可以参考:中文文档、英文文档。当然看看我写的也是可以的。
1、建立测试项目并安装webpack
(1)建立项目目录:mkdir WP
(2)进入项目目录:cd WP
(3)用npm init建立package.json文件(随便起一个名字,一路回车就好)
(4)安装webpack:npm install --save-dev webpack
(5)测试是否安装成功,法现webpack -v找不到命令,直接在package.json的scripts加上 "webpack": "webpack",然后运行npm run webpack -v 结果正确
(6)建立源文件目录:mkdir src
(7)用编辑器打开项目:subl .
至此,准备工作完成,我们得到的的项目目录和package.json文件如下所示:
(写了半天,发现插入一段代码后不能到下一行了,按了几次CTRL+Z, 居然回到这里了,真无语,再来一次)
2、entry和output的使用
为了测试先建立如下项目结构
各个文件内容如下:
//index.jsimport A from './js/test.js';function hello(){ console.log("hello"); console.log(A);}hello();//index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>This is for webpack study</title></head><body> <h1>祝大家发财</h1></body></html>//webpack.config.jsconst path = require("path");module.exports = { entry:"./src/index.js", output:{ path:path.resolve(__dirname,'dist'), filename:"bundle.js" }, // module:{}, // plugins:{}}
原标题:webpack你值得拥有
关键词:web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。