溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

node.js學(xué)習(xí)之webpack打包react最簡單用法

發(fā)布時(shí)間：2020-04-09 09:05:31 來源：網(wǎng)絡(luò) 閱讀：6813 作者：lixiaoyu1223 欄目：web開發(fā)

研究一天多也沒弄出來個(gè)毛，今天早上來到隨便一試，嘿，結(jié)果成了。最簡潔最簡單的使用方法，記錄下來。

首先，安裝webpack命令：

$ npm install webpack -g

全局安裝，可以在cmd中使用webpack命令。

然后創(chuàng)建一個(gè)項(xiàng)目，項(xiàng)目名稱webpack,我這里用的是webstorm11.創(chuàng)建成功之后cmd進(jìn)入項(xiàng)目根目錄，執(zhí)行命令：

$ npm init

這個(gè)命令會(huì)創(chuàng)建一個(gè)package.json的文件，是整個(gè)項(xiàng)目的配置文件，添加上webpack的依賴包：

"devDependencies": {
  "jsx-loader": "^0.12.2",
  "css-loader": "^0.15.0",
  "style-loader": "^0.12.4",
  "react-hot-loader": "^1.1.1",
  "webpack": "^1.5.1",
  "webpack-dev-server": "1.6.4"
},

這些包中的各種loader 是對(duì)不同文件格式進(jìn)行打包的支持。

然后安裝這些包：

$ npm install

安裝完成之后我們先新建一些文件，

根目錄下建一個(gè)src文件夾，

src文件夾中建一個(gè)項(xiàng)目入口文件，我這里建的是index.js.


index.js:

const React = require('react');
const ReactDom = require('react-dom');
const View = require('./content');

ReactDom.render(<View/>,document.body);


在跟index.js同目錄下，我建了一個(gè)content.js用來寫react組件。


content.js:

const React = require('react');

class View extends React.Component{
  render(){
    return <p>看看有沒有內(nèi)容</p>
  }
}

module.exports = View;



然后在根目錄下新建一個(gè)webpack.config.js，這個(gè)文件是對(duì)webpack的配置。

內(nèi)容如下：

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
  //插件項(xiàng)
  plugins: [commonsPlugin],
  //頁面入口文件配置
  entry: {
    index : './src/index.js'
  },
  //入口文件輸出配置
  output: {
    path: './lib/',
    filename: '[name].js'
  },
  module: {
    //加載器配置
    loaders: [
      { test: /\.js$/, loader: 'jsx-loader?harmony' }
    ]
  },
  //其它解決方案配置
  resolve: {
    root: 'D:/workproject/webpack/src', //絕對(duì)路徑
    extensions: ['', '.js', '.json', '.scss'],
    alias: {
      AppStore : 'js/stores/AppStores.js',
      ActionType : 'js/actions/ActionType.js',
      AppAction : 'js/actions/AppAction.js'
    }
  }
};

各個(gè)節(jié)點(diǎn)的作用都寫了注釋，插件項(xiàng)我還沒弄明白是什么意思，頁面入口文件配置就是項(xiàng)目的入口文件，入口文件輸出配置是對(duì)打包之后的文件的保存位置，我這里配置到了根目錄/lib/文件夾下，如果當(dāng)前沒有這個(gè)文件夾，打包的時(shí)候會(huì)自動(dòng)新建。

加載器配置是對(duì)要打包的不同文件格式使用不同的加載器去打包，這一塊是很重要的，

寫完這個(gè)配置文件之后就可以執(zhí)行命令打包了：

$ webpack

執(zhí)行這個(gè)命令時(shí)會(huì)自動(dòng)讀取webpack.config.js按照配置進(jìn)行打包。

如果是執(zhí)行這個(gè)命令后面不帶參數(shù)的話必須每修改一次文件就要重新手動(dòng)執(zhí)行一下這個(gè)命令，這樣很麻煩，我們可以在命令后加一個(gè)參數(shù) -w

$ webpack -w

這樣在我們每次修改完文件內(nèi)容并保存的時(shí)候會(huì)自動(dòng)編譯，就不用每次再手動(dòng)執(zhí)行一次了。


打包完之后我們會(huì)發(fā)現(xiàn)在項(xiàng)目根目錄下多出了一個(gè)lib文件夾，文件夾里有個(gè)index.js，那是配置中的入口文件輸出配置中寫好的

//入口文件輸出配置
  output: {
    path: './lib/',
    filename: '[name].js'
  },

path 是輸出路徑，filename 是輸出名字，[name] 是原名輸出，也可以指定名字，如果指定一個(gè)固定的名字，可以

filename: 'build.js'

這樣直接寫，如果有多個(gè)入口文件，可以

filename: '[name].build.js'

到時(shí)候輸出的文件名就是index.build.js.我這個(gè)項(xiàng)目里輸出的還是原來的名字：index.js

打包好之后，我們?cè)诟夸浵滦陆ㄒ粋€(gè)index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="lib/common.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/index.js" charset="utf-8"></script>
</body>
</html>

把兩個(gè)文件都引入進(jìn)去。common.js 我還沒弄明白是什么。 lib/index.js 就是我們用webpack打包過的文件，是自動(dòng)生成的。

然后就可以直接雙擊index.html在瀏覽器中查看結(jié)果。

本文參考http://www.jianshu.com/p/b95bbcfc590d 更多內(nèi)容稍后補(bǔ)充。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手