1. node_modules/.bin/webpack

    用webpack 打包

    因为我们没有全局安装webpack 所以要用到这条命令

  2. 创建html

    npm install --save-dev html-webpack-plugin

3.babel 使用es6

yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev

4.react 的处理

yarn add babel-preset-react@6.24.1 -- --dev

5.安装react

yarn add react react-dom

6.css

yarn add style-loader@0.19.1 css-loader@0.28.8 --dev

 rules: [
    {
       test: /\.css$/,
       use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
    },
  ];

webpack (1)的更多相关文章

  1. 深入学习webpack(一)

    深入学习webpack(一) 模块化的相关库和工具已经很多了,包括require.js.sea.js和一些工程化工具webpack.gulp.grant.那么我们该如何选择呢? 其实,我们只需要掌握了 ...

  2. 玩转webpack(二):webpack的核心对象

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者介绍:陈柏信,腾讯前端开发,目前主要负责手Q游戏中心业务开发,以及项目相关的技术升级.架构优化等工作. 前言 webpack 是一个强大的模 ...

  3. vue(9)—— 组件化开发 - webpack(3)

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  4. vue(8)—— 组件化开发 - webpack(2)

    webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack( ...

  5. 深入学习webpack(二)

    深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...

  6. 走近webpack(5)--devtool及babel的使用

    这一章咱们来说一下如何使用babel以及如何用webpack调试代码.这是基础篇的最后一章,这些文章只是罗列的给大家讲解了在一些场景中webpack怎样使用,这章结束后会给大家讲解一下如何在我们实际的 ...

  7. 走近webpack(0)--正文之前的故事

    在前端工作的过程中,只要你接触过vue,angular,react,gulp就一定知道webpack或者听说过或者使用过webpack,但是或许你对webpack的使用方法并不是十分了解,只是会用写好 ...

  8. 走进webpack(1)--环境拆分及模块化

    初级的文章和demo已经基本完成了,代码也已经上传到了我的github上,如果你对webpack的使用并不是十分了解,那么建议你回头看下走近系列,里面包括了当前项目中使用频繁的插件,loader的讲解 ...

  9. 走进webpack(2)--第三方框架(类库)的引入及抽离

    在当代的前端开发中,很少会用原生JS来开发页面,最基本的都会使用jQuery来节省我们开发的时间和效率,而angular,vue,react的出现更是为前端开发者带来了福音.那么这篇文章就说说如何用w ...

  10. vue(7)—— 组件化开发 — webpack(1)

    引子 在研究完前面的vue开发后,其实已经可以自己开发点东西了,靠前面的指令集,组件,还有vue-router,还有异步请求这些知识点,是完全可以开发出来的,完全可以达到时下前后端分离的效果. 但是, ...

随机推荐

  1. ivew 绑定时间控件

    <FormItem label="开始时间" style="width: 100%" prop="startDate"> < ...

  2. hdu 3183 rmq+鸽巢原理

    题目大意: 给你一个数字字符串序列,给你要求删掉的数字个数m,删掉m个数使的剩下的数字字符串的之最小.并输出这个数字: 基本思路; 这题解法有很多,贪心,rmq都可以,这里选择rmq,因为很久没有写r ...

  3. spring boot 热部署devtools实现(成功,主要是添加依赖后配置setting)

    1.devtools spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot ...

  4. 【leetcode】75. Sort Colors

    题目如下: 解题思路:我的解题思路是遍历数组,遇到0删除该元素并插入到数组头部,遇到1则不处理,遇到2删除该元素并插入到数组尾部. 代码如下: class Solution(object): def ...

  5. php min()函数 语法

    php min()函数 语法 作用:从所有参数中找到最小数 语法:min(X,Y,Z) 或者min(array(X,Y,Z)) 参数:min函数中参数至少一个,可以多个参数,也可以是数组. 说明:如果 ...

  6. ES6 Generator使用

    // generator介绍: function* hello() { console.log("hello world") } hello();//没有执行 // 直接调用hel ...

  7. xshell设置选中复制,右击粘贴功能

    . 设置选中复制: 工具--->选项--->键盘和鼠标--->(然后根据下图设置保存即可) 2. 设置ctrl + v 粘贴功能: 工具--->选项--->键盘和鼠标-- ...

  8. Java并发:搞定线程池(上)

    原文地址:https://www.nowcoder.com/discuss/152050?type=0&order=0&pos=6&page=0 本文是在原文的基础+理解,想要 ...

  9. C#进阶系列——WebApi 路由机制剖析:你准备好了吗? 转载https://www.cnblogs.com/landeanfen/p/5501490.html

    阅读目录 一.MVC和WebApi路由机制比较 1.MVC里面的路由 2.WebApi里面的路由 二.WebApi路由基础 1.默认路由 2.自定义路由 3.路由原理 三.WebApi路由过程 1.根 ...

  10. Html5 学习笔记 --》html基础 css 基础

    HTML5 功能 HTML5特点 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta cha ...