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'
  }

寫在最後

若是以爲對你有所幫助，能夠點贊收藏，若是發現哪裏寫的很差能夠在下邊評論指出，你的意見就是我繼續編寫下去的動力，若是有什麼問題能夠評論指出我會爲你進行解答！

我的建立了一個羣，由於羣二維碼有時間限制，你們能夠掃描個人我的微信！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。