webpack配置（react 版本

建立檔案webpack.config.js

1.配置入口和出口：並安裝webpack 包

constpath = require('path');

module.exports = }

2.配置js檔案

在output後面加：

module: }}
}

安裝下面的包:

"babel-core"

: "6.26.0"

,"babel-loader"

: "7.1.2"

,"babel-preset-env"

: "1.6.1"

,"babel-preset-react"

: "6.24.1"

3.配置html外掛程式

在module後面加：本身編譯後能生成乙個html檔案，如果想用自己的html模版，則自己建立乙個index.html檔案，並引入這個外掛程式

安裝外掛程式： "html-webpack-plugin": "2.30.1",

配置：

const htmlwebpackplugin = require('html-webpack-plugin');

plugins: [
newhtmlwebpackplugin()],

4.配置樣式

安裝 "css-loader": "0.28.8"，"style-loader": "0.19.1"

但是這樣css檔案沒有被分離出來，還需要安裝

"extract-text-webpack-plugin": "3.0.2"；解析出來的scss才能是單獨的檔案

配置：

constextracttextplugin = require("extract-text-webpack-plugin");

)
},

plugins: [
newextracttextplugin("index.css")]

如果是scss檔案，

安裝："sass-loader": "4.0.0", "node-sass": "4.7.2",

配置：

)
},

5.配置檔案

安裝："file-loader": "1.1.6",url-loader": "0.6.2"

配置：

}]
},

6.配置字型檔案（font-awesome）

配置：

}]
}

7.安裝webpack-dev-server包，實現自動重新整理

配置：改埠號

devserver: ,

8.如果需要生成的html,css,js各自放在單獨的檔案裡：則需要配置引入外掛程式

constwebpack=require('webpack');

plugins: [
newwebpack.optimize.commonschunkplugin(),
],

並修改一些路徑地方：

完整的webpack.config.js

constpath = require('path');
constwebpack=require('webpack');
consthtmlwebpackplugin = require('html-webpack-plugin');
constextracttextplugin = require("extract-text-webpack-plugin");
module.exports = ,
module: }},
//樣式css
) },
) },
// }]},
//字型}]
}]
},plugins: [
newhtmlwebpackplugin(),
newextracttextplugin("css/index.css"),//改
newwebpack.optimize.commonschunkplugin(),
],devserver: ,
};

package.json:

"repository"

: ,"author"

: "gloria.hu"

,"license"

: "isc"

,"devdependencies"

: ,"dependencies"

: }

webpack手動配置React開發環境

首先用npm初始化環境 mkdir react webpack demo cd react webpack demo npm init y 安裝相關軟體包 npm install react react dom webpack webpack cli webpack dev server html ...

React 安裝 webpack打包

你也可以直接使用菜鳥教程的 react cdn 庫，位址如下以下例項輸出了 hello,world id example 嘗試一下例項解析例項中我們引入了三個庫 react.min.js react dom.min.js 和 browser.min.js reactdom render hel...

webpack構建react應用

一新建乙個資料夾。mkdir webpack react demo二在此資料夾下建立package.json檔案右鍵新建檔案也行。這裡使用 npm init 初始化專案的方式自動生成。在webpack react demo資料夾下進入cmd命令列，輸入npm init，一路enter就行。三 ...

webpack配置（react 版本

webpack手動配置React開發環境

React 安裝 webpack打包

webpack構建react應用

相關推薦