webpack入门及结合react进行开发

前端之家收集整理的这篇文章主要介绍了webpack入门及结合react进行开发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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进行安装管理。

项目初始化

  1. npm init -y

安装webpack

  1. npm install webpack -gd //全局
  2. npm install webpack --save-dev //局部

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

  • 创建app.js

  1. import bar from './bar';
  2.  
  3. bar();
  • 创建bar.js

  1. export default function bar() {
  2. document.write("Hello World")
  3. }
  • index.html

  1. <html>
  2. <head>
  3. ...
  4. </head>
  5. <body>
  6. ...
  7. <script src="bundle.js"></script> //bundle使我们进行打包的文件
  8. </body>
  9. </html>
  • 在webpack.config.js中进行配置

  1. module.exports = {
  2. entry: './app.js',//entry引入的文件
  3. output: {
  4. filename: 'bundle.js' //output 打包到的文件
  5. }
  6. }

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

下边结合react进行开发

安装babel-lorder

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

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

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

安装cnpm

  1. npm install cnpm -gd

转译插件

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

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

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

  1. {
  2. "presets": ["env","babel-preset-react"]
  3. }

安装 react库

  1. npm install react react-dom --save

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

Hello World实例

我们的项目结构如下图:

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

  • index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  6. <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>webpack</title>
  8. </head>
  9. <body>
  10. <div id="app"></div>
  11. <input type="text">
  12. <script src="/build/bundle.js"></script>
  13. </body>
  14. </html>
  • app.js

  1. 'use strict'
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import HelloWorld from './components/HelloWorld';
  5. import './css/main.css';
  6.  
  7. ReactDOM.render(
  8. <HelloWorld/>,document.getElementById("app")
  9. );
  • webpack.config.js

  1. module.exports = {
  2. entry: './app.js',output: {
  3. filename: "build/bundle.js"
  4. },module: {
  5. rules: [
  6. {test: /\.js$/,exclude: /node_modules/,loader: "react-hot-loader!babel-loader"}
  7. ]
  8. }
  9. }

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

webpack-dev-server启动端口

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

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

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

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

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

运行命令

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

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

安装react-hot-loader

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

继续配置webpack配置文件

  1. rules: [
  2. {test: /\.js$/,loader: "react-hot-loader!babel-loader"},{test: /\.css$/,loader: "style-loader!css-loader"}
  3. ]

配置完的大概是这样

  1. var path = require("path");
  2. module.exports = {
  3. devtool:'source-map',entry: './app.js',output: {
  4. path: path.resolve(__dirname,filename: "build/bundle.js"
  5. },loader: "style-loader!css-loader"}
  6. ]
  7. }
  8. }

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

安装style-loader css-loader

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

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

  1. import './css/main.css';

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

  1. module.exports = {
  2. devtool:'source-map'
  3. }

写在最后

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

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

猜你在找的React相关文章