摘要：最后還可以跟我們的進(jìn)行結(jié)合管理代碼什么是說(shuō)明白點(diǎn)就是模塊打包機(jī)，可以很好的管理我們的模塊，可以對(duì)瀏覽器進(jìn)行更好的兼容。安裝首選我們要安裝，中已經(jīng)給我們下載了我們通過(guò)進(jìn)行安裝管理。

重要提示（2017年7月26號(hào)更新）

本文介紹的是最新版的3.4.1，并且其中又跟React結(jié)合的例子！

前端技術(shù)更新太快，從幾年前的jquery、djto、Prototype到react、vue、angular，自動(dòng)化工具也是這樣從之前的grunt、requireJs到現(xiàn)在的gulp、webpack、jspm、包管理工具也是從之前的bower、npm到現(xiàn)在的yern！技術(shù)更新?lián)Q代特別快，所以我們開(kāi)發(fā)人員每天應(yīng)該有倆個(gè)小時(shí)以上來(lái)學(xué)習(xí)技術(shù)！

現(xiàn)今的很多網(wǎng)頁(yè)其實(shí)可以看做是功能豐富的應(yīng)用，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴(lài)包。為了簡(jiǎn)化開(kāi)發(fā)的復(fù)雜度，前端社區(qū)涌現(xiàn)出了很多好的實(shí)踐方法

模塊化 通過(guò)webpack我們使用它可以很好的管理我們的前端代碼

打包 通過(guò)webpack我們可以進(jìn)行應(yīng)用打包，編輯、壓縮代碼、圖片

loader 通過(guò)webpack我們可以通過(guò)loader進(jìn)行編輯我們的模塊，把我們的文件或者模塊進(jìn)行編輯，編輯成我們的javascript或者網(wǎng)頁(yè)能看懂的語(yǔ)言！

通過(guò)webpack可以編輯less、sass、postcss等css預(yù)處理器。

最后還可以跟我們的react、vue進(jìn)行結(jié)合管理代碼

WebPack說(shuō)明白點(diǎn)就是模塊打包機(jī)，可以很好的管理我們的模塊，可以對(duì)瀏覽器進(jìn)行更好的兼容。

現(xiàn)在開(kāi)始使用最新版的webpack，我寫(xiě)的比較簡(jiǎn)單希望對(duì)你們有所幫助，看完之后可以使用我們的webpack。

首選我們要安裝nodeJs，nodeJs中已經(jīng)給我們下載了npm我們通過(guò)npm進(jìn)行安裝管理。

npm init -y

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

安裝后之后我們就可以進(jìn)行打包打包使用

創(chuàng)建app.js

import bar from "./bar";

bar();

創(chuàng)建bar.js

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

index.html

  
    ...
  
  
    ...
       //bundle使我們進(jìn)行打包的文件
  

在webpack.config.js中進(jìn)行配置

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

命令行運(yùn)行webpack，打開(kāi)瀏覽器你會(huì)看到我們的Hello World，這就是最簡(jiǎn)單的webpack使用！

通過(guò)babel我們可以編輯Es6+、jsx等，我們開(kāi)發(fā)現(xiàn)代代碼必不可少的一款工具！

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

在這里我要介紹一下cnpm，我們?cè)谂渲铆h(huán)境的過(guò)程中可能會(huì)遇到自己網(wǎng)速慢，或者npm服務(wù)器慢的特點(diǎn)，我們可以通過(guò)淘寶鏡像cnpm進(jìn)行安裝，跟咱們的npm一樣不過(guò)是淘寶鏡像過(guò)來(lái)的，因此不受外網(wǎng)服務(wù)器影響。安裝跟npm一樣，我們做的額只不過(guò)是把前邊的npm改成cnpm

npm install cnpm -gd

我們需要安裝一些插件才可以進(jìn)行我們的jsx編輯，因?yàn)槲覀兊膔eact就是通過(guò)jsx寫(xiě)的

npm install babel-preset-env  babel-preset-react --save-dev
//淘寶鏡像安裝
cnpm install babel-preset-env  babel-preset-react --save-dev

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

npm install react react-dom --save

這樣我們就可以進(jìn)行react和webpack結(jié)合進(jìn)行模塊管理。

我們的項(xiàng)目結(jié)構(gòu)如下圖：

把index.html、bundle.js放在build文件夾下邊，我們的入口文件app.js文件地址不變。

index.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(
    ,
    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"}
 ]
}
}

我們運(yùn)行webpack watch進(jìn)行項(xiàng)目啟動(dòng)，我們看到的是本地文件的網(wǎng)址，我們需要安裝下邊的環(huán)境插件啟動(dòng)端口

我們的webpack啟動(dòng)的端口8080：端口

npm install  webpack-dev-server -gd  //全局
npm install  webpack-dev-server --save-dev  //局部
//我們的文件需要在全局進(jìn)行安裝

運(yùn)行 webpack-dev-server --content-base build/ 默認(rèn)啟動(dòng)是運(yùn)行 webpack-dev-server，由于我們創(chuàng)建了文件框架，所以需要指定目錄文件運(yùn)行 --content-base build/這樣我們就可以進(jìn)行文件刷新，發(fā)現(xiàn)很不方便，需要進(jìn)行文件自動(dòng)刷新，或者模塊熱更新

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

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

這樣就可以進(jìn)行文件更新，但是這樣做每次都大刷頁(yè)面，還可以更好一點(diǎn)，比如更新其中的一個(gè)模塊其他的不刷新，

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

繼續(xù)配置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"}
  ]
}
}

剛開(kāi)始就說(shuō)過(guò)webpack很強(qiáng)大，我們可以通過(guò)安裝loader進(jìn)行處理，比如說(shuō)css、less、sass等

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

這樣我們就可以引入css到我們的入口文件，今天遇到一點(diǎn)小坑，因?yàn)橹坝玫绞莏spm，我在文件后邊加了個(gè)！
跟我們引入其他模塊一樣，css也是我們的模塊

import "./css/main.css";

這樣就介紹的差不多了，下邊給大家介紹一款webpack模塊瀏覽器調(diào)試的小東西，
我們只需要在我們的webpack配置文件中加入下邊的代碼就可以進(jìn)行代碼調(diào)試！

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

如果覺(jué)得對(duì)你有所幫助，可以點(diǎn)贊收藏，如果發(fā)現(xiàn)哪里寫(xiě)的不好可以在下邊評(píng)論指出，你的意見(jiàn)就是我繼續(xù)編寫(xiě)下去的動(dòng)力，如果有什么問(wèn)題可以評(píng)論指出我會(huì)為你進(jìn)行解答！

個(gè)人創(chuàng)建了一個(gè)群，因?yàn)槿憾S碼有時(shí)間限制，大家可以?huà)呙栉业膫€(gè)人微信！