简单介绍webpack react基本配置,入门型:

环境配置:

依赖nodejs,官网下载最新版的nodejs:nodejs.org/en

安装完nodejs  npm便自动集成了,通过npm安装其他环境

$ npm install webpack -g    安装webpack

当然如果常规项目还是把依赖写入 package.json 包去更人性化:

$ npm init$ npm install webpack --save-dev

打开项目根目录  shift+右键  选择当前文件夹打开命令框

执行 $ npm init   一步一步创建 package.json

loader加载器  安装css-loader  style-loader :

npm install css-loader style-loader --save-dev

到这步基本可以使用了:

创建两个js

c.js

d.js

打开项目根目录  shift+右键  选择当前文件夹打开命令框  输入命令

$ webpack js/d.js build/build.js

第一个js是入口文件  第二个是出口文件  最终将c.js于d.js 打包成 build.js

-------------------------------------------------------------------------------------------

在项目根目录下创建 webpack.config.js  配置文件  可以配置参数 直接打包

module.exports = {
entry:"./js/d.js",
output:{
path:"./build/",
filename:"cd.js"
},
module:{
loaders:[
{
test:/.css$/,
loaders:["style","css"],
exclude:"/node_modules/"
}
]
},
resolve:{
extensions:['','.js','.css','.jsx']
}
}

说明:

有了配置文件  可以直接输入命令:

$ webpack      进行打包

未完待续。。。

  

webpack react基础配置一的更多相关文章

  1. webpack react基础配置二 热加载

    用到 webpack-dev-server  先安装,注意 装到全局 还是本项目我也没注意  因为之前一直报错,有很小可能是安装到本地解决了,或者是我网络问题: 装到全局:$ npm install ...

  2. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  3. 从零开始搭建react基础开发环境(基于webpack5)

    前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...

  4. webpack+babel+react+antd技术栈的基础配置

    webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...

  5. Webpack+React+ES6 最新环境搭建和配置(2017年)

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  6. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  7. Webpack+React项目入门——入门及配置Webpack

    一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...

  8. webpack4.41.0配置一(基础配置webpack文件,入口出口,实现打包)

    1.查看node.js版本.npm版本和webpack版本(使用webpack4时,请确保node.js的版本>=8.9.4) 2.我先重新卸载了webpack和webpack-cli(全局) ...

  9. webpack(11)配置文件分离为开发配置、生成配置和基础配置

    前言 上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境 webpac ...

随机推荐

  1. MVC入门第一天

    一.异步的两种方法 用jQ的异步  返回content controllor:return Content(sum.ToString());//这里涉及到一个自动封装的问题 html页:<for ...

  2. 关于JavaScript的判断语句(2)

    上一篇描述的都是一些通过条件判断来执行,符合条件下面的代码块,达到对动作的反应效果 这篇将描述的是for. for/in. while. do/while循环语句. for语句: for(i=0,i& ...

  3. vert.x学习(三),Web开发之Thymeleaf模板的使用

    在vert.x中使用Thymeleaf模板,需要引入vertx-web-templ-thymeleaf依赖.pom.xml文件如下 <?xml version="1.0" e ...

  4. .NET中MemCached使用介绍

    阅读目录 1.MemCached是什么? 2.Window中MemCached安装 3.MemCached命令 4.简单示例 MemCached是什么 MemCached是一个自由开源,高性能,分布式 ...

  5. laravel 在windows中使用一键安装包步骤

    安装 PHP 注意一:Laravel 5.0 开始对 PHP 版本的要求是 >=5.4,Laravel 5.1 要求 PHP 版本 >=5.5.9,所以,建议大家尽量安装 5.5.x 的最 ...

  6. css控制段落

    <p></p>标签:一段话或者段落适宜于用p标签: 段落缩进:text-indent:50px: 文字方向:text-align:center居中.left往左显示.right ...

  7. mysql和CSV

    1.mysql导入和导出数据可以通过mysql命令或者mysqldump来完成.mysqldump可以导入和导出完整的表结构和数据.mysql命令可以导入和导出csv文件. 1.mysql支持导入和导 ...

  8. java实现删除文件以及文件夹

    首先,需要明确的是File类中的delete()方法适用于删除空目录,或者单个文件. 然后,对于二级目录以上的文件夹的删除,需要分两步进行删除. 1.删除最底层目录下面的文件,或者空目录 当有多个文件 ...

  9. javascript的缓动效果

    这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...

  10. Css定位之absolute_慕课网课程笔记

    absolute和float 绝对定位和浮动有相似之处,即都有破坏性和包裹性,破坏性是指其会导致包裹自身的复原塌陷,包裹性是float的天赋技能,对于绝对定位来说,其会包括子元素 越独立越强大 1.去 ...