nodejsにreact.jsを取り付け、webpackで梱包します.
2560 ワード
nodejsにreact.jsを取り付け、webpackで梱包します.
この記事では、nodejsに基づいてnpmでreactをインストールするために必要なカバンとwebpackを使って包装することを紹介します.
node.js公式サイトに登録して、node.js公式サイトをダウンロードします. 1、npm init 、npm install–save react react-dom babelify babel-preset-react 、npm install babel-presete-es 2015–save 、webpack使用と構成は、文書のルートディレクトリの下でwebpack.co.fig.jsを作成することができます.注意:ここで使っているwebpackは4.6. 5、webpackをインストールする 、webpackサーバ(npm install-g webpack-dev-server) をインストールします.、ローカルインストールwebpackサーバ(npm install-g webpack-dev-server–save) 、ローカルインストールwebpack(npm install webpack–save) 、包装webpack 、絶えず監視(webpack–watch) 11、(webpack-dev-server)自動更新は保存しなくてもいいです.ページの拡張機能はあります.http://localhost:8080/webpack-dev-server 、ホットローディング(webpack-dev-server–contentbase src–inline-hot) 13、chromプラグインreact-develop-tool をインストールします.
この記事では、nodejsに基づいてnpmでreactをインストールするために必要なカバンとwebpackを使って包装することを紹介します.
node.js公式サイトに登録して、node.js公式サイトをダウンロードします.
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname),
entry: "./src/js/index.js",
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}]
},
mode:'none',
plugins:[],
output: {
path: path.join(__dirname),
filename: "./src/bundle.js"
}
};