博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Webpack2学习记录-1
阅读量:5915 次
发布时间:2019-06-19

本文共 960 字,大约阅读时间需要 3 分钟。

1、安装前准备

安装 webpack 之前,需要安装 node,这时最新的是 6,npm 是 4。如果有老的 node 项目在跑建议安装下 。

 

2、建议安装在局部,即在项目下的 node_modules 里

比如在 webpack_demo 目录下新建了一个 w1 项目,先用 npm init -y 命令生成一个 package.json 文件

 

接着执行 npm install webpack --save-dev 安装最新的 webpack

 

1分钟不到安装成功后,输入 ./node_modules/.bin/webpack -v 可以测试下

 

如果是全局安装,直接输入 webpack 即可

 

3、w1目录创建 app 目录及 index.js

index.js 内容如下

import _ from 'lodash';function component () {  var element = document.createElement('div');  /* lodash is required for the next line to work */  element.innerHTML = _.join(['Hello','webpack'], ' ');  return element;}document.body.appendChild(component());

 

4、index.js 用到了 ,因此也需要安装下

 

5、w1目录下创建 index.html,内如如下

      webpack 2 demo           

 

最后的 w1 的目录结构如下

 

6、index.html 中引入的是 dist/bundle.js ,这个 dist 目录即是 webpack 执行输出的

cd 到 w1 执行 ./node_module/.bin/webpack app/index.js dist/bundle.js

 

回到 w1,下面多出了一个 dist 目录和 bundle.js

 

7、打开 index.html,可以看到页面输出了 “Hello webpack”,至此完成。

 

8、index.js 中用到了 ES6 的 ,这个 webpack 默认支持,完整的 ES6 语法需要单独安装 。

 

转载地址:http://fxgpx.baihongyu.com/

你可能感兴趣的文章
linux基础命令 rm
查看>>
Java常量池理解与总结
查看>>
Eclipse常用快捷键
查看>>
Java并发编程:Lock
查看>>
为动态产生的新元素添加事件
查看>>
linux笔记6.0
查看>>
动态路由协议BGP反射器的配置
查看>>
Java基础——Servlet
查看>>
MySQL基础操作命令创建库DDL
查看>>
思岚发布新品雷达RPLIDAR S1,测距可达40米
查看>>
jenkins远程发布tomcat项目
查看>>
如何恢复苹果手机照片?简单恢复
查看>>
JSP jsp表达式 jsp代码片段 jsp中的声明 jsp的注释
查看>>
Hibernate day02(2)
查看>>
红米Note 5详细卡刷开发版获得root超级权限的步骤
查看>>
com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method 错误处理
查看>>
通过自定义UITextField 设置 搜索框
查看>>
这款神秘的移动端OCR引擎,如何做到“所见即所得”?
查看>>
const,static,extern简介(重要)
查看>>
公共语言运行库
查看>>