webpack入门及结合react进行开发

OldPanda 发布于2019-08-20 18:19 / 2675人阅读

摘要：最后还可以跟我们的进行结合管理代码什么是说明白点就是模块打包机，可以很好的管理我们的模块，可以对浏览器进行更好的兼容。安装首选我们要安装，中已经给我们下载了我们通过进行安装管理。

webpack入门及结合react进行开发

重要提示（2017年7月26号更新）

本文介绍的是最新版的3.4.1，并且其中又跟React结合的例子！

写在前边

前端技术更新太快，从几年前的jquery、djto、Prototype到react、vue、angular，自动化工具也是这样从之前的grunt、requireJs到现在的gulp、webpack、jspm、包管理工具也是从之前的bower、npm到现在的yern！技术更新换代特别快，所以我们开发人员每天应该有俩个小时以上来学习技术！

什么是webpack，为什么我们要使用webpack 为什么我们要使用webpack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

模块化 通过webpack我们使用它可以很好的管理我们的前端代码

打包通过webpack我们可以进行应用打包，编辑、压缩代码、图片

loader 通过webpack我们可以通过loader进行编辑我们的模块，把我们的文件或者模块进行编辑，编辑成我们的javascript或者网页能看懂的语言！

通过webpack可以编辑less、sass、postcss等css预处理器。

最后还可以跟我们的react、vue进行结合管理代码

什么是webpack

WebPack说明白点就是模块打包机，可以很好的管理我们的模块，可以对浏览器进行更好的兼容。

开始使用Webpack

现在开始使用最新版的webpack，我写的比较简单希望对你们有所帮助，看完之后可以使用我们的webpack。

安装

首选我们要安装nodeJs，nodeJs中已经给我们下载了npm我们通过npm进行安装管理。

项目初始化

npm init -y

安装webpack

npm install webpack -gd //全局
npm install webpack --save-dev  //局部

安装后之后我们就可以进行打包打包使用

创建app.js

import bar from "./bar";

bar();

创建bar.js

export default function bar() {
  document.write("Hello World")
}

index.html


  
    ...
  
  
    ...
       //bundle使我们进行打包的文件

在webpack.config.js中进行配置

module.exports = {
  entry: "./app.js",    //entry引入的文件
  output: {
    filename: "bundle.js"    //output  打包到的文件
  }
}

命令行运行webpack，打开浏览器你会看到我们的Hello World，这就是最简单的webpack使用！

下边结合react进行开发 安装babel-lorder

通过babel我们可以编辑Es6+、jsx等，我们开发现代代码必不可少的一款工具！

npm install --save-dev babel-loader babel-core

在这里我要介绍一下cnpm，我们在配置环境的过程中可能会遇到自己网速慢，或者npm服务器慢的特点，我们可以通过淘宝镜像cnpm进行安装，跟咱们的npm一样不过是淘宝镜像过来的，因此不受外网服务器影响。安装跟npm一样，我们做的额只不过是把前边的npm改成cnpm

安装cnpm

npm install cnpm -gd

转译插件

我们需要安装一些插件才可以进行我们的jsx编辑，因为我们的react就是通过jsx写的

npm install babel-preset-env  babel-preset-react --save-dev
//淘宝镜像安装
cnpm install babel-preset-env  babel-preset-react --save-dev

在主项目录下的babelrc进行配置

{
  "presets": ["env","babel-preset-react"]
}

安装 react库

npm install react react-dom --save

这样我们就可以进行react和webpack结合进行模块管理。

Hello World实例

我们的项目结构如下图：

把index.html、bundle.js放在build文件夹下边，我们的入口文件app.js文件地址不变。

index.html




    
    
    
    webpack

app.js

"use strict"
import React from "react";
import ReactDOM from "react-dom";
import HelloWorld from "./components/HelloWorld";
import "./css/main.css";

ReactDOM.render(
    ,
    document.getElementById("app")
);

webpack.config.js

module.exports = {
  entry: "./app.js",
  output: {
    filename: "build/bundle.js"
  },
  module: {
  rules: [
     {test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader"}
 ]
}
}

我们运行webpack watch进行项目启动，我们看到的是本地文件的网址，我们需要安装下边的环境插件启动端口

webpack-dev-server启动端口

我们的webpack启动的端口8080：端口

npm install  webpack-dev-server -gd  //全局
npm install  webpack-dev-server --save-dev  //局部
//我们的文件需要在全局进行安装

运行 webpack-dev-server --content-base build/ 默认启动是运行 webpack-dev-server，由于我们创建了文件框架，所以需要指定目录文件运行 --content-base build/这样我们就可以进行文件刷新，发现很不方便，需要进行文件自动刷新，或者模块热更新

首先需要配置webpakc.comfig.js文件

var path = require("path");
......
output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "build/bundle.js"
  }

运行命令

webpack-dev-server --content-base build/ --inline

这样就可以进行文件更新，但是这样做每次都大刷页面，还可以更好一点，比如更新其中的一个模块其他的不刷新，

安装react-hot-loader

npm install react-hot-loader --save-dev

继续配置webpack配置文件

rules: [
     {test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader"},
     {test: /.css$/, exclude: /node_modules/, loader: "style-loader!css-loader"}
  ]

配置完的大概是这样

var path = require("path");
module.exports = {
  devtool:"source-map",
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "build/bundle.js"
  },
  module: {
  rules: [
     {test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader"},
     {test: /.css$/, exclude: /node_modules/, loader: "style-loader!css-loader"}
  ]
}
}

刚开始就说过webpack很强大，我们可以通过安装loader进行处理，比如说css、less、sass等

安装style-loader css-loader

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

这样我们就可以引入css到我们的入口文件，今天遇到一点小坑，因为之前用到是jspm，我在文件后边加了个！
跟我们引入其他模块一样，css也是我们的模块

import "./css/main.css";

这样就介绍的差不多了，下边给大家介绍一款webpack模块浏览器调试的小东西，
我们只需要在我们的webpack配置文件中加入下边的代码就可以进行代码调试！

module.exports = {
  devtool:"source-map"
  }

写在最后

如果觉得对你有所帮助，可以点赞收藏，如果发现哪里写的不好可以在下边评论指出，你的意见就是我继续编写下去的动力，如果有什么问题可以评论指出我会为你进行解答！

个人创建了一个群，因为群二维码有时间限制，大家可以扫描我的个人微信！

云服务器 GPU云服务器 webpack入门 react开发神器 docker react 开发 webrtc音视频开发react

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84352.html

TypeScript极速完全入门-3ts结合react进行项目开发

摘要：前面我们已经说了大部分的核心内容，接下来我们就说说如何用开发实际项目。因为和结合很紧密，资料也很多，而且我会找机会专门说下这方面的知识，所以我们将重点放到如何用结合上来。所以前面打牢基础，现在我们开始实际组建工作流。前面我们已经说了大部分typescript的核心内容，接下来我们就说说如何用typescript开发实际项目。因为angular和typescript结合很紧密，资料也...

arashicage 2019-08-22 16:45 评论0 收藏0
webpack 教程资源收集

学习的过程中收藏了这些优秀教程和的项目，希望对你有帮助。 github地址, 有不错的就更新官方文档中文指南初级教程 webpack-howto 作者：Pete Hunt Webpack 入门指迷作者：题叶　 webpack-demos 作者：ruanyf 一小时包教会 —— webpack 入门指南作者：VaJoy Larn　　 webpack 入门及实践作者：...

Backache 2019-08-21 14:05 评论0 收藏0
库，组件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架构就是骨架，如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。翻译 | 上手 Webpack ? 这篇就够了！ - 掘金译者：小 boy （沪江前端开发工程师）本文原创，转载请注明作者及出处。原文地址：https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

tommego 2019-08-20 16:33 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0