webpack入门及结合react进行开发

时间 2019-11-10

原文原文链接

webpack入门及结合react进行开发

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

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

写在前边

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

什么是webpack，为何咱们要使用webpack

为何咱们要使用webpack

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

模块化 经过webpack咱们使用它能够很好的管理咱们的前端代码vue
打包经过webpack咱们能够进行应用打包，编辑、压缩代码、图片java
loader 经过webpack咱们能够经过loader进行编辑咱们的模块，把咱们的文件或者模块进行编辑，编辑成咱们的javascript或者网页能看懂的语言！node
经过webpack能够编辑less、sass、postcss等css预处理器。react
最后还能够跟咱们的react、vue进行结合管理代码jquery

什么是webpack

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

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="bundle.js"></script>   //bundle使咱们进行打包的文件
  </body>
</html>

在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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack</title>
</head>
<body>
    <div id="app"></div>
    <input type="text">
    <script src="/build/bundle.js"></script>
</body>
</html>

app.js

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

ReactDOM.render(
    <HelloWorld/>,
    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'
  }

写在最后

若是以为对你有所帮助，能够点赞收藏，若是发现哪里写的很差能够在下边评论指出，你的意见就是我继续编写下去的动力，若是有什么问题能够评论指出我会为你进行解答！

我的建立了一个群，由于群二维码有时间限制，你们能够扫描个人我的微信！