使用webpack和react搭建項目
看了N多博客，日誌，一邊迷茫一邊摸索。本文記錄流程。我怕自己忘了。。。並且修復了博客園首頁推薦那個日誌中遇到的bug
1、webstorm新建一個空白項目，比如webpack_demo
2、因為要用react和es6語法，調整webstorm-設置-語言-javascript-jsx，確定。這樣文件不會報錯。
3、新建app（存放入口文件，component組件），static（存放打包後的文件），webpack（存放webpack配置文件）三個文件夾
4、在webpack_demo根目錄，打開cmd或者終端，輸入npm init，一路回車
5、完成後，繼續輸入npm install webpack -g。完成webpack的配置
6、在app中新建main.js；在webpack中新建配置文件webpack.config.js；在static中新建一個index.html；在static中新建一個js目錄
7、在index頁面寫以下內容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"View Code/> <title>webpack_Demo</title> </head> <body> <div class="content"> </div> <script src="./js/app.js" type="text/javascript" charset="utf-8"></script> </body> </html>
8、配置webpack.config.js
var path = require("path"); module.exportsView Code= { entry:{ //入口文件 "app":path.join(__dirname,"../app/main.js") //app對應生成的文件名 }, output:{ path:path.join(__dirname,"../static/js/"), filename:"[name].js" //這裏[name]就是表示對應entry對象的name，然後生成的後戳是.js } }
9、隨便在main.js寫點什麽，比如alert
10、在cmd中運行
webpack --config ./webpack/webpack.config.jsView Code
11、成功後訪問index.html，沒成功重復上面的操作
12、每次編譯都很煩，可以在package.json中添加對應的配置，代碼如下
{ "name": "web_pack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack --config ./webpack/webpack.config.js" //添加一個build 值是打包用到的命令 }, "author": "", "license": "ISC", "dependencies": { "webpack": "^3.0.0" } }View Code
13、再次運行npm run build
14、安裝配置webpack-dev-server，實現熱更新。
1、在cmd中執行npm i webpack-dev-server --save-dev
2、在package.json中修改scripts
"test": "node_modules\.bin\webpack-dev-server --config ./webpack/webpack.config.js --port 8089 --open",View Code
3、index頁面的js，使用絕對路徑，比如 http://localhost:8089/app.js
4、cmd中執行 npm run test，可以開啟一個本地服務器，每次更改代碼後，自動刷新頁面
15、繼續安裝react，在cmd中執行 npm i babel babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom --save
16、在main.js中隨便寫點react的代碼，比如hello world
17、在webpack.config.js添加babel-loader用來解析jsx和es6
var path = require("path"); module.exports = { entry:{ "app":path.join(__dirname,"../app/main.js") }, output:{ path:path.join(__dirname,"../static/js/"), filename:"[name].js" }, module:{ loaders:[ { test:/\.(js|jsx)$/, loader:"babel-loader", exclude:/node_module/, query:{ presets:["react","es2015"] } } ] } }View Code
18、這個時候如果以上都正確，瀏覽器會自動刷新出helloworld
19、可以再下載style-loader和css-loader處理樣式
使用webpack和react搭建項目