关于React框架的搭建(Webpack的安装与使用)
来源:互联网 发布:php高并发是什么意思 编辑:程序博客网 时间:2024/06/06 04:16
什么是webpack?
webpack是一个模块打包工具,在前端中模块指的就是js,css,图片等类型文件。webpack支持多种模块系统,而且兼容js的多种书写规范(如ES6),它可以处理模块间的相互依赖关系,对静态资源进行统一打包和发布。
webpack的安装与使用
首先我们创立一个文件夹如study,在开始菜单打开cmd,进入该文件夹,然后进行以下步骤: 1、npm init //创建一个package.json的工程文件。 2、npm install -g webpack // 在全局安装webpack,若已安装过则可以跳过。 3、npm install --save-dev webpack //在项目中安装webpack。 创建完成之后,我们在我们的文件目录中创建两个文件夹,为dist(打包后放置的文件夹)与src(我们写项目的地方)。src文件夹中我们先创立两个文件为index.js与main.js。dist文件夹中我们创立一个index.html用来让浏览器来读取显示。结构如下:
我们在dist/index.html中写好初始的内容,引入的js文件为bundle.js文件,这个文件就是webpack打包后生成的文件。如下图:
在index.js中输入“导出代码”:
module.exports = function() { var hello = document.createElement('div'); hello.textContext = "This is index.js file." return hello;}
将hello变量导出,在main.js接受变量,然后将该变量插入到root标签中:
const hello = require('./index.js');document.querySelector('#root').appendChild(hello());
接下来我们在根目录下创建一个webpack.config.js文件用来配置webpack,我们先进行简单的配置,目前主要做的是要设置内容的入口路径以及打包后文件的存放路径。在webpack.config.js中写入以下代码块:
module.exports = { entry: __dirname + "/src/main.js", output:{ path: __dirname + "/dist", filename: "bundle.js" },}
entry为唯一的入口文件,也就是webpack要从这里读取,output为输出,这里设置的是输出到dist目录下的bundle.js文件。接着运行webpack在cmd中运行 ".\\node_modules\\.bin\\webpack" 这是在windows中运行的。若已安装全局则使用 "webpack"也可以。进一步我们不用以上的输入方式,在package.json中的scripts中加入 "start": "webpack" ,即可通过npm start命令来启用webpack。package.json中的脚本部分已经默认添加了./node_modules/.bin路径,所以我们也不需要输入详细的路径地址了。start是一个特殊的脚本名称,我们也可以起其他的名字,但是如果对应的不是start那么我们要启动时必须要使用npm run {你在script中所用的名字} 如npm run build。
webpack的在开发生产时的具体功能
开发时需要调试代码,在打包过后如果出错我们就需要调试工具来帮我们改正错误。Source Map就是帮我们解决这个难题的。他要在我们的webpack.config.js文件中进行配置,属性名为devtool,他有四种选项来让使用者来选择。1、source-map: 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度;2、cheap-module-source-map: 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;3、eval-source-map: 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项;4、cheap-module-eval-source-map: 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点。我们这里用第三种方法。在webpack.config.js进行以下配置:
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/src/main.js", output:{ path: __dirname + "/dist", filename: "bundle.js" },}
这四种方式从上到下打包速度回越来越快,当然隐患越来越多,所以在生产阶段还是用第一种为好。
使用webpack构建本地服务器
webpack提供一个可选的可以检测代码的修改并自动刷新页面的本地服务器。该服务器是基于node.js的,不过我们需要单独安装它作为项目依赖。npm install --save-dev webpack-dev-serverdevserver作为webpack配置选项中的一项,以下是它的一些主要配置选项:1、contentBase: 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)2、port: 设置默认监听端口,如果省略,默认为“8080”3、inline: 设置为true,当源文件改变时会自动刷新页面4、historyApiFallback: 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html代码如下:
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/src/main.js", output:{ path: __dirname + "/dist", filename: "bundle.js" }, devServer:{ contentBase: "./dist", //读取目录 port: 8000, //端口号 inline: true, //实时刷新 historyApiFallback: true //单页面不跳转 },}
接着我们要在package.json中配置server代码如下:
{ "name": "study-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack", "test": "echo \"Error: no test specified\" && exit 1", "server": "webpack-dev-server --open" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.8.1", "webpack-dev-server": "^2.9.3" }}
接着在cmd中输入 npm run server 即可在浏览器中打开本地服务器。
Loaders
loaders作为webpack的强大功能之一,它的作用就是让webpack调用外部脚本和工具来对不同的格式的文件进行处理。Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置,Loaders的配置选项包括以下几方面:1、test:一个匹配loaders所处理的文件的扩展名的正则表达式。2、loader: loader的名称(必需)。3、include/exclude:手动添加:手动添加需要的文件夹或者屏蔽掉不需要选择的文件。4、query: 为loaders提供了额外的设置选项。
babel
babel是一个编译js的平台,它可以帮助你的代码编译称为浏览器识别的代码。并且它还可以把js的扩展语言JSX编译称为浏览器识别的语句。安装依赖包: npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react 下面我们在webpack.config.js中来配置loader和babel:
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/src/main.js", output:{ path: __dirname + "/dist", filename: "bundle.js" }, module: { loaders:[{ test: /\.js$/, //需要匹配的文件扩展名 exclude: /node_modules/, // 排除不需要处理的文件夹 loader: 'babel-loader', // 所用的loader名称 query:{ presets: ['es2015', 'react'] // 支持es5与react } }] }, devServer:{ contentBase: "./dist", //读取目录 port: 2333, //端口号 inline: true, //实时刷新 historyApiFallback: true //单页面不跳转 },}
完成以上工作后接着来安装reactnpm install --save react react-dom接着修改src文件夹中的Index.js与main.js的代码,react使用的版本"react": "^16.0.0":以下是Index.js代码:
import React from 'react';import ReactDOM from 'react-dom';class Greeter extends React.Component{ render() { return ( <div> <span>my god</span> </div> ); }};export default Greeter
以下为main.js代码:
import React from 'react';import ReactDOM from 'react-dom';import Greeter from './Index';ReactDOM.render(<Greeter />, document.getElementById('root'));
Babel的配置选项
因为babel有非常多的配置选项,在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂,因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。因此现在我们就提取出相关部分,分两个配置文件进行配置(webpack会自动调用.babelrc里的babel配置选项)。将webpack.config.js中的query去掉,建立.babelrc文件写出一下代码:
{ "presets": ["react", "es2015"]}
css的相关安装
webpack把所有文件当成模块处理,只要有合适的loaders,它都可以被当做模块来处理。webpack提供两个工具处理样式表css-loader,style-loader,二者处理的任务不同,css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
安装loader
npm install --save-dev style-loader css-loader
接着webpack.config.js中添加loaders
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/src/main.js", output:{ path: __dirname + "/dist", filename: "bundle.js" }, module: { loaders:[ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css$/, loader: 'style-loader!css-loader' } ] }, devServer:{ contentBase: "./dist", //读取目录 port: 2333, //端口号 inline: true, //实时刷新 historyApiFallback: true //单页面不跳转 },}
接着我们可以创立一个css文件,记好路径,在main.js中(也就是webpack的入口文件)我们导入css文件即可使用。
这里题外说个问题,我们想在react中使用sass,就在此基础上先进行npm下载
加载: npm install sass-loader node-sass –save-dev
之后我们在webpack.config.js中添加loaders
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/src/main.js", output:{ path: __dirname + "/dist", filename: "bundle.js" }, module: { loaders:[ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.(css|scss)$/, loader: 'style-loader!css-loader!sass-loader' } ] }, devServer:{ contentBase: "./dist", //读取目录 port: 2333, //端口号 inline: true, //实时刷新 historyApiFallback: true //单页面不跳转 },}
之后再style文件夹中创立一个scss文件导入到main.js文件中即可使用了。
eslint的安装与使用
首先安装依赖包 npm install –save-dev eslint eslint-loader
通过配置webpack.congfig.js以及创建.eslintrc文件来配置好初始值即可在项目中使用eslint。
webpack.config.js:
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/src/main.js", output:{ path: __dirname + "/dist", filename: "bundle.js" }, module: { loaders:[ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader!eslint-loader' }, { test: /\.(css|scss)$/, loader: 'style-loader!css-loader!sass-loader' } ] }, devServer:{ contentBase: "./dist", //读取目录 port: 2333, //端口号 inline: true, //实时刷新 historyApiFallback: true //单页面不跳转 },};
.eslintrc
{ "parser": "babel-eslint", "rules": { "semi": [ "error", "always" ] }}
eslint的相关规则根据自己的需求来制定即可。之后大家即可进行基本的编写了~~
参考链接: http://blog.csdn.net/fengyinchao/article/details/52100357
- 关于React框架的搭建(Webpack的安装与使用)
- 使用yeoman搭建react-webpack框架的学习
- 关于ES6+React+webpack的环境搭建
- WEB前端使用 webpack + reack 搭建框架 02 本地服务 与 热替换(react-hot-loader)
- 针对 webpack + es6 + react 安装使用及其遇到的问题!
- 基于React+webpack的项目环境搭建
- React+Webpack+Babel开发环境的搭建
- React+webpack开发环境的搭建
- React+webpack开发环境的搭建_0
- React+webpack开发环境的搭建
- React+webpack开发环境的搭建_0
- React+webpack开发环境的搭建_0
- React+webpack开发环境的搭建
- React+webpack开发环境的搭建_0
- React+webpack开发环境的搭建
- React+webpack开发环境的搭建_0
- React+webpack开发环境的搭建
- React+webpack开发环境的搭建_0
- containsKey方法——判断是否包含指定的键名
- log4j.properties配置详解与实例
- 自己制作npy数据集,数据格式类似于mnist数据(16)---《深度学习》
- 移动端能用手指滑动的轮播图插件
- Unity官方教程 联机部分翻译
- 关于React框架的搭建(Webpack的安装与使用)
- storyboard 改造
- C/C++区别之 Volatile 关键字
- memcache安装和下载(win7)及登陆
- 自定义Writable类型
- 关于shiro后台权限改动,重新登录后发现权限还是以前的问题的解决
- VS2015相关配置总结
- Linux 基本操作指令
- CardView的基本用法