webpack react基础配置一
简单介绍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基础配置一的更多相关文章
- webpack react基础配置二 热加载
用到 webpack-dev-server 先安装,注意 装到全局 还是本项目我也没注意 因为之前一直报错,有很小可能是安装到本地解决了,或者是我网络问题: 装到全局:$ npm install ...
- 深入浅出 webpack 之基础配置篇
前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...
- 从零开始搭建react基础开发环境(基于webpack5)
前言 最近利用闲暇时间把webpack系统的学习了下,搭建出一个react环境的脚手架,写篇文章总结一下,帮助正在学习webpack小伙伴们,如有写的不对的地方或还有可以优化的地方,望大佬们指出,及时 ...
- webpack+babel+react+antd技术栈的基础配置
webpack+babel+react+antd技术栈的基础配置 前段时间使用webpack+babel+react+antd做了一套后台管理系统,刚开始被一大堆的新知识压的喘不过气来,压力挺大的.还 ...
- Webpack+React+ES6 最新环境搭建和配置(2017年)
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- react+webpack开发环境配置
react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- webpack4.41.0配置一(基础配置webpack文件,入口出口,实现打包)
1.查看node.js版本.npm版本和webpack版本(使用webpack4时,请确保node.js的版本>=8.9.4) 2.我先重新卸载了webpack和webpack-cli(全局) ...
- webpack(11)配置文件分离为开发配置、生成配置和基础配置
前言 上篇我们已经配置好了本地开发服务器,但是配置的相对比较凌乱,一个文件中有些是开发时用到的配置,有些是生成时用到的配置,有些是开发和生成都要用到的配置,所以我们这里把环境分为3个环境 webpac ...
随机推荐
- linux安装jdk和scala
安装jdk 1.下载jdk 2.在linux中创建一个文件夹java,我习惯放在user下 3.上传jdk安装包到java下,然后解压 4.ect/profile下修改文件,添加环境变量 JAVA_H ...
- escape,encodeURI,encodeURIComponent的区别
escape是对字符串进行编码而另外两种是对URL. encodeURI方法不会对下列字符编码 ASCII字母 数字 ~!@#$&*()=:/,;?+'encodeURIComponent方法 ...
- new一个JAVA对象的时候,内存是怎么分配的?
new 对象的时候 在内存中 建立一个 内存区域 就是堆内存 用来存放对象的属性,当new完对象把对象的地址赋给对象的引用变量 这个时候 又在内存中建立一个区域 叫栈内存 用来存储 引用变量 引用变量 ...
- 关于(object sender, EventArgs e)
sender是事件源 就是指发起这个事件的对象(控件)//表示触发事件的那个控件比如说你按下按钮,那么sender就是按钮 又如:textboxchange,sender就是该textbox,在事 ...
- 安装springboot时遇到 LoggerFactory is not a Logback LoggerContext but Logback is on the classpath.问题
将工程外部jar包删除slf4j就可以运行.
- grep 命令详解
[root@www ~]# grep [-acinv] [--color=auto] '搜寻字符串' filename 选项与参数: -a :将 binary 文件以 text 文件的方式搜寻数据 - ...
- CMake undefined reference to `QTcpServer::QTcpServer(QObject*)'的解决
1. 这是因为工程link不到network的库,因此除了要包含头文件 #include 之外,还需要在.pro文件中加入: QT += network 2. 对于CMake,需添加Net ...
- linux 安装配置Nginx
简介: Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国 ...
- jS正则和WEB框架Django的入门
JS正则 -test 判断字符串是否符合规定的正则表达式 -exec 获取匹配的数据 test的例子: 从上述的例子我们可以看出,如果rep.test匹配到了就返回true,否则返回false exe ...
- PHP数组内容不重复组合排列算法
最近在做ecshop的商品库存模块,分别给一款商品的多个属性组合设置库存,如下图: 一款手机有不同颜色,屏幕尺寸,系统和电量,都要设置不同的库存,如果都要手动选择属性组合,则会耗费很多不必要的时间.假 ...