摘要:這里是里面的內(nèi)容安裝如果速度太慢,建議使用淘寶的,和的區(qū)別建議去了解一下。安裝以及相關(guān)插件使用加載器繼續(xù)修改里面的內(nèi)容,給對象加一個屬性。
很多人剛學習react的時候,往往因為繁瑣的配置而頭疼,這里我將手把手教大家怎么用webpack配置react和redux的環(huán)境,這篇教程包括前端react和后臺node整個網(wǎng)站的環(huán)境配置,對node沒興趣的可以只看這篇。
這里是下篇鏈接:手把手教你webpack、react和node.js環(huán)境配置(下篇)
我把所有代碼都放到了github上面供參考:webpack-react-express環(huán)境配置
1. 什么是webpack?
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔,等到實際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換,任何形式的資源都可以視作模塊,比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
2. 創(chuàng)建項目
先創(chuàng)建項目文件夾,我這里命名為blog,當成一個博客項目,當然你也可以命名成其他的。
mkdir blog && cd blog
接著用npm初始化這個項目。(使用npm之前需要先安裝node.js和npm)
npm init
這些內(nèi)容可以enter鍵全部跳過,結(jié)束后目錄里面會出現(xiàn)一個package.json文件,這個文件里面是我們項目的信息。
之后我們再創(chuàng)建兩個文件夾,分別放前端和后臺的代碼,這兩部分我會分開講。
mkdir client && mkdir server
3. client
由于我們使用的是es2015和react這些語法,所以需要用babel來編譯,命令行進入到client目錄,并且創(chuàng)建兩個目錄分別存放編譯前的代碼和編譯后的代碼。
mkdir src && mkdir dist
我們會把js和css多帶帶打包出來,所以在dist目錄下面創(chuàng)建js和css目錄以及index.html入口文件,同時在src目錄下面創(chuàng)建幾個目錄(之后的創(chuàng)建命令行就省略了,你也可以直接右鍵創(chuàng)建文件夾)。
這是最新的項目結(jié)構(gòu):
+ blog + client + dist // 編譯并打包后的文件 + images + js + css + index.html // 前端入口文件 + src + assets // 圖片等靜態(tài)資源 + components // 一些公用組件 + form.jsx + form.scss + button.jsx + form.scss + layouts // 一些布局組件(包括jsx和sass文件),比如導(dǎo)航欄、側(cè)邊欄等等 + sidebar.jsx + sidebar.scss + nav.jsx + nav.scss + containers // 整個頁面 + pageA.jsx + pageA.scss + pageB.jsx + pageB.scss + redux // 和redux有關(guān)的文件 + actions // action文件 + reducers // reducer文件 + rootReducer.js + store // 初始化的狀態(tài) + routes // 路由相關(guān)文件 + routes.js }//歡迎加入全棧開發(fā)交流圈一起學習交流:582735936 ]//面向1-3年前端人員 } //幫助突破技術(shù)瓶頸,提升思維能力 + main.js // 整個前端項目的入口文件 + server // 服務(wù)端文件 + package.json
這時候安裝一下項目依賴的框架和庫。
npm install react react-dom redux react-redux react-router antd css-loader style-loader node-sass sass-loader file-loader url-loader autoprefixer postcss-loader --save
這里是index.html里面的內(nèi)容:
webpack
安裝
如果npm速度太慢,建議使用淘寶的cnpm,g和save的區(qū)別建議去了解一下。
npm install webpack -g npm install extract-text-webpack-plugin --save-dev // 將css多帶帶打包的插件 npm install path --save-dev // 和路徑
配置文件
現(xiàn)在我們在blog目錄創(chuàng)建一個webpack.config.js文件。(webpack使用commonJS的語法)
var webpack = require("webpack"), ExtractTextPlugin = require("extract-text-webpack-plugin"); var config = { entry: { // 打包入口 index: "./client/src/main.js", vendor: [ // 將react和react-dom這些多帶帶打包出來,減小打包文件體積 "react", "react-dom" ] }, }//歡迎加入全棧開發(fā)交流圈一起學習交流:582735936 ]//面向1-3年前端人員 } //幫助突破技術(shù)瓶頸,提升思維能力 output: { // 打包目標路徑 path: "./client/dist", filename: "js/[name].js" }, resolve: { "extentions": ["", "js"]//當requrie的模塊找不到時,添加這些后綴 } } module.exports = config; babel Babel 是一個 JavaScript 編譯器,可以將es6、jsx等編譯為瀏覽器可以識別的語法。
安裝babel以及相關(guān)插件
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-1 babel-plugin-import babel-cli --save-dev
使用webpack loader加載器
繼續(xù)修改webpack.config.js里面的內(nèi)容,給config對象加一個module屬性。
var config = { module: { loaders: [{ // babel loader test: /.js|.jsx$/, exclude: /node_modules/, loader: "babel", query: { presets: ["es2015", "react", "state-1"] } }, { test: /.(scss|sass|css)$/, // 打包sass和css文件 loader: ExtractTextPlugin.extract({fallbackLoader: "style-loader", loader: "css-loader!postcss-loader!sass-loader"}) }, { test: /.(png|jpg|jpng|eot|ttf)$/, // 打包圖片和字體文件 loader: "url-loader?limit=8192&name=images/[name].[ext]" }] } }
test一般是一段正則,用來匹配對應(yīng)類型的文件。
exclude是應(yīng)該被忽略的文件,這里指定了node_modules。
query則有兩種寫法,一種是我們上面寫的那種,另一種是放到loader后,比如:
loader: "babel-loader?presets[]=es2015&&presets[]=react&&presets[]=state-1"
不過相比這兩種方式,我更建議將這些放到一個.babelrc文件里面。
在blog目錄下面創(chuàng)建一個.babelrc文件,內(nèi)容如下:
{ "presets": ["es2015", "react", "stage-1"], "plugins": [ // 這個是配置ant design的按需加載的環(huán)境 [ "import", { "libraryName": "antd", "style": "css" } ] ] }
我們接著完善webpack.config.js,在config對象里面添加一個plugins屬性,這個是用來配置插件的。
var config = { plugins: [ new webpack.optimize.CommonsChunkPlugin("vendor", "js/vendor.bundle.js"), //這是之前多帶帶打包出來的react、react-dom等文件 new ExtractTextPlugin("css/index.css"), // 將所有sass/css文件打包成一個index.css文件 new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }), new webpack.optimize.UglifyJsPlugin({ // 壓縮打包后的代碼 compress: { warnings: false } }) ]
到這里,我們的webpack環(huán)境算是全部配置完了,我們可以在main.js里面寫一段代碼進行測試。
import React from "react" import { render } from "react-dom" render(hello, world
, document.getElementById("app") )
然后在命令行里面輸入webpack,出現(xiàn)下面這些就是成功了,這時dist/js下面會出現(xiàn)index.js和vendor.bundle.js兩個文件。
接著我們趕緊打開index.html文件來看看效果。(千萬不要忘了在index.html里面引入index.js和vendor.bundle.js)
事實證明了前端水實在太深了,只是寫一個hello world都要配置這么多東西,安裝這么多框架和庫,希望大家不要放棄,繼續(xù)愛前端。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/99458.html
摘要:這里是里面的內(nèi)容安裝如果速度太慢,建議使用淘寶的,和的區(qū)別建議去了解一下。安裝以及相關(guān)插件使用加載器繼續(xù)修改里面的內(nèi)容,給對象加一個屬性。 很多人剛學習react的時候,往往因為繁瑣的配置而頭疼,這里我將手把手教大家怎么用webpack配置react和redux的環(huán)境,這篇教程包括前端react和后臺node整個網(wǎng)站的環(huán)境配置,對node沒興趣的可以只看這篇。這里是下篇鏈接:手把手教你...
摘要:上篇我介紹了前端下和等環(huán)境的配置,這篇將繼續(xù)重點介紹后臺的配置。我把所有代碼都放到了我的上環(huán)境配置后臺這邊的配置就簡單了很多,我這里拿的框架來配置。 上篇我介紹了前端下webpack和react、redux等環(huán)境的配置,這篇將繼續(xù)重點介紹后臺node.js的配置。 我把所有代碼都放到了我的github上:webpack-react-express環(huán)境配置 server 后臺這邊的配置就...
摘要:上篇我介紹了前端下和等環(huán)境的配置,這篇將繼續(xù)重點介紹后臺的配置。我把所有代碼都放到了我的上環(huán)境配置后臺這邊的配置就簡單了很多,我這里拿的框架來配置。 上篇我介紹了前端下webpack和react、redux等環(huán)境的配置,這篇將繼續(xù)重點介紹后臺node.js的配置。 我把所有代碼都放到了我的github上:webpack-react-express環(huán)境配置 server 后臺這邊的配置就...
閱讀 2947·2023-04-26 01:52
閱讀 3475·2021-09-04 16:40
閱讀 3633·2021-08-31 09:41
閱讀 1767·2021-08-09 13:41
閱讀 566·2019-08-30 15:54
閱讀 2967·2019-08-30 11:22
閱讀 1619·2019-08-30 10:52
閱讀 953·2019-08-29 13:24