你的位置:首页 > 软件开发 > Java > webpack你值得拥有

webpack你值得拥有

发布时间:2017-04-28 00:01:31
很久没有发文章了,但是强调一点,大~熊同学最近可没闲着。学习算法,复习计算机网络,也顺便学习了一下webpack,看了看操作系统(没办法,都没学,要是不学连实习笔试都过不了,伤心~~)。本来比较纠结是写关于算法的文章呢还是关于webpack的呢。最终决定写关于webpack 的, ...

webpack你值得拥有

  很久没有发文章了,但是强调一点,大~熊同学最近可没闲着。学习算法,复习计算机网络,也顺便学习了一下webpack,看了看操作系统(没办法,都没学,要是不学连实习笔试都过不了,伤心~~)。本来比较纠结是写关于算法的文章呢还是关于webpack的呢。最终决定写关于webpack 的,一方面,虽然刚刚开始学习webpack,但是他的特性让人感觉非常爽,然我有一种想分享的冲动;另一方面,算法要写公式,这个编辑器貌似不太好编辑,截图也比较麻烦。废话不说了,这篇文章介绍webpack的四个核心配置项。我写的不好,你可以参考:中文文档、英文文档。当然看看我写的也是可以的。

1、建立测试项目并安装webpack

  webpack你值得拥有    

  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, 居然回到这里了,真无语,再来一次)

       webpack你值得拥有

2、entry和output的使用

  为了测试先建立如下项目结构

  webpack你值得拥有

  各个文件内容如下:

//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

web
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。